🏷️ Space Travelers Hub

This is the sixth project of the third module in the Microverse program.
Check the below contents for further details about this project.

📗 Contents

• Description
• Instructions
• Authors
• Future
• Contributions
• Support
• Acknowledgements
• License

📖 Description

This project is a simple reservation & joining hub for SpaceX built with ReactJS framework. It applies Components and Hooks along with GitFlow workflow. State management is implemeneted using Redux & Redux Toolkit. External data fetching is done with Thunk api & Axois. Navigation inside the app is implemented using React Router. Styling inside the project is done with CSS Modules. Unit testing is handles with Jest framework. All project dynamic files are contained in src directory while static assets are in public directory. The live build is generated inside the build directory. Also config linters for (CSS3 / JavaScript) in the .github folder.

📌 Live Demo:

• See the project live from here.

📌 Tech Stack:

• Framework used is ReactJS
• State management by Redux Toolkit
• Page structure is built with JSX
• Styling is built with CSS3
• Dynamic content is built with ES6 JavaScript
• Bundling is done with WebPack
• Data fetching is handled by Axios
• Uint testing with Jest

📌 Key Features:

• Single page app with all content loaded dynamically
• Responsive layout with all screen sizes
• Data list is persistent & fetched from remote server
• Reserving & canceling actions for Rockets page
• Joining & leaving actions for Missions page
• Profile displays user current reserved rockets & joined missions
• Ability to cancel rockets & leave missions on profile page
• External Wikipedia link for more information a new tab

back to top

🛠️ Instructions

You can easily download or fork this repository and work on it immadiately!

📌 Prerequisites:

• NodeJS for installing & running all packages

📌 Installation:

• Install all dependencies with npm

npm install

📌 Development:

• For live development on localhost:3000 run:

npm run start

📌 Testing:

• To run unit tests use:

npm run test

📌 Deployment:

• You can deploy this project by uploading files in the build folder to a live server.
• Create the distribution build using this command:

npm run build

back to top

👥 Authors

📌 Mahammad:

• GitHub
• Twitter
• LinkedIn

📌 Gumaro:

• GitHub
• LinkedIn

back to top

🔭 Future

Some additional features I may implement in the project:

• Using CSS preprocessors and their relevant loaders
• Implement advanced Hooks features like useMemo

back to top

🤝🏻 Contributions

Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the issues page too.

back to top

⭐️ Support

Like this project? Show your support by starring!

back to top

🙏🏻 Acknowledgements

I thank everyone at Microverse for guiding me through this project.

back to top

📝 License

This project is MIT licensed.

back to top