💻 PROJECT NAME ✨ => 💻 SpaceX Data App : Capsules dataGrid search & Authentication System
Welcome to my SpaceX Data React App! This application allows users to explore SpaceX rockets or capsule data in a user-friendly interface.
| Resume | Github | Portfolio | Blogger | Medium | |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
-
HTML5CSS3-JavaScriptReactJSRedux
-
NodeJSExpressJS-MongoDB
-
Vercel
-
TailwindCss
-
Vercel
✨Clone the repository.
✨Run the command npm install in both the frontend and backend folders.
✨Run the command npm run dev in the backend folder.
✨Run the command npm start in the frontend folder on localhost:3000.
The SpaceX Data React App is a front-end application built using React. It fetches and displays data from SpaceX through a RESTful API. The backend is implemented with Nodejs for authorization.
- Modern landing page with three main sections: Banner, search form, and data grid.
- Fully functional search form with three search filters.
- Elegant and responsive design for all screen sizes and browsers.
- Optimized queries for quick data retrieval.
- Pagination for the data grid.
- Popup to display detailed item data on item click.
- Authentication - signup, login, logout, private route for landing page
- good UI with animated CSS
| Serial No | Backend | Frontend |
|---|---|---|
| 1 | nodemon ,bcrypt | tailwindcss |
| 2 | mongoose ,swagger-jsdoc | React Router dom |
| 3 | cors , swagger-ui-express | redux , react-icons |
| 4 | dotenv,express | react-redux , react-thunk |
| 6 | body-parser | react-toastify , react |
| 7 | jsonwebtoken | react-hot-toast , axios |
Explore the SpaceX data by interacting with the search form and viewing the data grid. Click on items in the grid to see detailed information in the popup.
Explore the Swagger documentation for the backend REST API here.
For backend testing, you can use tools like Postman. Ensure that the backend is running and test the API endpoints.23
Contributing
💻 Contributions are welcome! Please follow the standard guidelines for contributing.