Space Travelers' Hub
Desktop View Representation |
---|
π Table of Contents
- π About the Project
- π» Getting Started
- π₯ Authors
- π Future Features
- π€ Contributing
- βοΈ Show your support
- π Acknowledgements
- β FAQ (OPTIONAL)
- π License
π [Space-Travelers-Hub]
[Space Travelers' Hub] In this project, we will work with actual live data from the SpaceX API. our task is to build a web application for a company that provides commercial and scientific space travel services. The application will allow users to book rockets and join selected space missions.
π Built With
Tech Stack
-
Client
Key Features
- [Responsive layout]
- [UX/UI accessibility]
- [Dynamic data]
π Live Demo
π» Getting Started
To get a local copy up and running, follow these steps:
Prerequisites
In order to run this project you need:
- A browser of you choice.
- A text editor of your choice.
- An installed node.js on your local system
Setup
Clone this repository to your desired folder:
-
Use the following Commands:
cd your-desired-folder git clone git@github.com:ab-noori/Space-Travelers-Hub.git
Install
-
Install this project with:
npx create-react-app my-app cd my-app npm start
Usage
-
Use the following commands to run the project on your local system:
npm run build npm run deploy
Run tests
-
Run the following script and style test:
npx eslint "**/*.{js,jsx}" npx eslint "**/*.{js,jsx}" --fix npx stylelint "**/*.{css,scss}" npx stylelint "**/*.{css,scss}" --fix
Deployment
-
1- install gh-pages with following command:
npm i -D gh-pages
-
2- Add homepage to project's jason file:
"homepage": "https://ab-noori.github.io/Space-Travelers-Hub",
-
3- Add the following scripts to the package.jason file:
"predeploy": "npm run build", "deploy": "gh-pages -d build ",
-
4- Finally run the following command:
npm run deploy
π₯ Authors
π€ Abdul Ali Noori
- GitHub: @ab-noori
- Twitter: @AbdulAliNoori4
- LinkedIn: abdul-ali-noori
π€ Dennis Owusu Prahi
- GitHub: @githubhandle
- LinkedIn: LinkedIn
π Future Features
- [fetched data from api into redux store]
- [Used redux toolkit]
- [Applied conditional rendering of component]
π€ Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
βοΈ Show your support
If you like this project, give it a star.
π Acknowledgments
I would like to thank Microverse and my coding partners. Also, I want to give credit to Nerd's lesson
YouTub Channel, its react tutorial
is really helpful.
β FAQ (OPTIONAL)
-
How to make it mobile friendly?
- Put a viewport tag in the header
-
How to design the site?
- Draw a mockup before starting to code
π License
This project is MIT licensed.