https://github.com/shikhu51197/spacex-capsules

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.
https://github.com/shikhu51197/spacex-capsules

animation expressjs html-css-javascript mongodb node-js postman reactdevtools reactjs redux redux-thunk reduxdevtools swagger-ui tailwindcss toast

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/shikhu51197/spacex-capsules
• Owner: shikhu51197
• Created: 2024-01-20T07:40:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-20T23:33:00.000Z (over 1 year ago)
• Last Synced: 2025-01-31T15:41:38.784Z (3 months ago)
• Topics: animation, expressjs, html-css-javascript, mongodb, node-js, postman, reactdevtools, reactjs, redux, redux-thunk, reduxdevtools, swagger-ui, tailwindcss, toast
• Language: JavaScript
• Homepage: https://learn-ecommerce-jkwy.vercel.app
• Size: 302 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


> 💻 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.

---

![Demo video of Project](https://img.shields.io/badge/Demo_Video_Of_Project-Click_ME-brightgreen.svg?style=plastic&logo=YouTube&logoColor=red)

[![Backend Deploy to Vercel](https://img.shields.io/badge/Backend_Deployed_Vercel_Link-0A66C2?style=for-the-badge&logo=ko-fi&logoColor=white)](https://brainstormforce.onrender.com/)

[![Deployed App Vercel Link](https://img.shields.io/badge/Deployed_App_Vercel_Link-000?style=for-the-badge&logo=ko-fi&logoColor=white)](

https://learn-ecommerce-jkwy.vercel.app/)

---

## 🔗 Profile Links✨

| Resume | Github                                                                                                                                   | Linkedin                                                                                                                                                            | Portfolio                                                                                                                                    | Blogger                                                                                                                                                           | Medium                                                                                                                                    |

| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

| [![Resume](https://img.shields.io/badge/my_Resume-E75480?style=for-the-badge&logo=ko-fi&logoColor=white)](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [![github](https://img.shields.io/badge/github-1DA1F2?style=for-the-badge&logo=github&logoColor=white)](https://github.com/shikhu51197/)| [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[![portfolio](https://img.shields.io/badge/my_portfolio-18A303?style=for-the-badge&logo=ionic&logoColor=white)](https://shikhu51197.github.io/) |[![Blogger](https://img.shields.io/badge/Blogger-FE5A1D?style=for-the-badge&logo=Blogger&logoColor=white)](https://wwwartificial-intelligence.blogspot.com/) |[![Medium](https://img.shields.io/badge/Medium-000?style=for-the-badge&logo=Medium&logoColor=white)](https://medium.com/@sg780060) |  

---

## 💫Tech-Stack->

- #### For Frontend:-

  

   - `HTML5`

  - `CSS3`

  - `JavaScript `

  - `ReactJS`

  - `Redux`

    

 - #### For Backend:-

   

   - `NodeJS`

   - `ExpressJS`

    - `MongoDB `

     

- #### For deploy database:- 

    

   - `Vercel`

   

- #### For Styling:-

  

  - `TailwindCss`

  

- #### For live Project: -

  - `Vercel`

  

---

## ⭕Steps to run our project:

✨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.

---

## ⭕ Description

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.

#  Features✨:-

- 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

---

# Package.json(Dependency)✨:-

 | 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|

---

# ⭕ Usage

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.

# ⭕ Swagger Documentation

Explore the Swagger documentation for the backend REST API here.

![Screenshot (1918)](https://github.com/shikhu51197/LearnEcommerce/assets/107506646/a40ab746-c645-4d7d-95d4-c5579f8cdfbe)

# ⭕ Testing

For backend testing, you can use tools like Postman. Ensure that the backend is running and test the API endpoints.23

![WhatsApp Image 2024-01-21 at 3 19 40 AM (2)](https://github.com/shikhu51197/LearnEcommerce/assets/107506646/18bc3775-6430-4546-afba-c683122f136b)

![WhatsApp Image 2024-01-21 at 3 19 40 AM](https://github.com/shikhu51197/LearnEcommerce/assets/107506646/aec19480-9f75-4871-8c1c-33c51b909109)

![WhatsApp Image 2024-01-21 at 3 19 40 AM (1)](https://github.com/shikhu51197/LearnEcommerce/assets/107506646/d710b24d-9cad-4356-87cd-44241b937b28)

Contributing

     💻 Contributions are welcome! Please follow the standard guidelines for contributing.

---

✨Thank You✨