Planets fact site

Front-End Mentor Challenge Solution with React, React Router and SASS (Still in development)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Challenge Brief
   • Built With
2. Getting Started
   • Installation and Setup
   • Getting Started With Create React App
   • Prerequisites
3. Project Status
   • Current
   • Next Steps
4. Project Screenshots
   • Preview
5. Reflection
   • Goals
6. Support Me
7. Usage
8. Roadmap
9. Contributing
10. License
11. Contact
12. Acknowledgements

About The Project

Note: Project is still in development!

Planets fact site is a project that I built as a challenge from the frontendmentor.io website.

Challenge Brief

Your challenge is to build out this 8-page planets fact site and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

If you choose to use a JS-heavy approach, we provide a local data.json file for the planets. This means you'll be able to pull the data from there instead of using the separate .html files.

Your users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• View each planet page and toggle between the "Overview", "Internal Structure", and "Surface Geology" tabs

Built With

This section lists any major frameworks that I used to build my project.

• React
• React Router
• SASS
• Figma
• Flexbox
• Mobile-first Workflow
• Semantic HTML5 markup

Getting Started

Installation and Setup

Clone down this repository. You will need node and npm installed globally on your machine.

Installation:

npm install

To Start Server:

npm start

To Visit App:

localhost:3000

Getting Started with Create React App

This project was bootstrapped with Create React App.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Prerequisites

Project Status

Current

Style touchups.

Next steps:

• Adding styles for larger devices.
  • Adding styles for the header menu.
  • Adding styles for the planet data.
• Adding planet specific color styles.
• Style touchups.
• Adding README screenshots.
• Adding a loading component.
• Adding animations.
• Optimizing and refactoring code.

Project Screenshots

Preview:

N/A - Coming soon

See live: Portfolio

Reflection

Goals:

I have spent a total of 10 hours building this project.

Support me

Usage

Planets facts:

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Author

Loreta Krasteva

See live: Planets Fact)

Project Link: https://github.com/loretta-arineva/planets-fact

Acknowledgements

• Stack Overflow
• Frontendmentor