React Project

E-commerce made with Javascript and React using Context and SASS.
⭐ Request Feature ⭐

💬 Introduction to Aether Project: Recreating the Steam Store

The primary objective of this project was to reimagine and recreate the user experience akin to the renowned Steam store.

The foundational backend infrastructure for Aether was established in my initial Backend Project, named Aether-E-Commerce_React_Project

The aim was to capture the essence and functionality of the Steam store, offering users a familiar game store experience. Join me on this journey in the development of Aether!

⚡ Objectives

• Register
• Login
• View products
• Create orders
• Add to cart
• Logout

🔧 Built with

⬇️ Download

 # Clone the repository
 $ git clone https://github.com/VeroPolegre/Aether-E-Commerce_React_Project
 
 # Enter the directory
 $ cd Aether-E-Commerce_React_Project

 # Install the dependencies
 $ npm install

 # Start the project
 $ npm start 

🚀 Development

The project was centered around creating a robust and user-friendly application, providing an engaging space for users to explore and interact. Let's dive into the key components and features!

Main pages components:

1. Join: Page for user registration.
2. Login: Enables users to log in to their accounts.
3. Confirmation: Confirmation page when their email account is confirmed.
4. Home: The main landing page of the app.
5. Cart: Manages the items selected for purchase.
6. Library: [future roadmap]
7. Community: [future roadmap]
8. Profile: User profile page.
9. Footer: Closing component at the bottom of the page.

Additional Components [future roadmap]:

• Categories: Component for displaying game categories.
• Action: Action category.
• Role_Playing: Role-playing category.
• Strategy: Strategy category.
• Adventure: Adventure category.
• Simulation: Simulation category.
• Sports_and_Racing: Sports and Racing category.
• NotFound: Page not found component.

React Router Implementation:

• /home: The app's main landing page.
• /login: Page for user login and join.
• /profile: User profile page.
• /library: [future roadmap]
• /community: [future roadmap]

Key Features:

• React Context for Efficient State Management:

  • Used to efficiently manage and share state across components without the need for prop drilling. This facilitates a more streamlined and maintainable state management approach.

• SASS and Tailwind for Enhanced Styling and Design:

  • SASS for a more structured and modular approach to styling, allowing for the creation of reusable styles. Additionally, leverages Tailwind CSS to expedite the styling process with utility-first classes. Tailwind provides a vast set of pre-defined styles, enabling rapid and consistent design implementation.

API Integration and use:

To enable secure API requests, CORS module was installed:

1. In the backend repo (Aether-E-Commerce_React_Project): npm i cors
2. In index.js, the following code was added:

   const cors = require("cors");
   app.use(cors());
   

Testing the user flow

Aether.Store.mp4

Aether.User.Flow.mp4

Aether.responsive.mp4

🤝 Contributing

Our open-source community thrives because of contributions, making it an incredible space for learning, inspiring, and innovating.

I genuinely value your contributions. If you have any suggestions to improve it, please consider forking the repository and initiating a pull request. Alternatively, you can easily open an issue labeled "enhancement." And, don't forget to show your support for the project by giving it a star! Thank you!

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

🖊️ License

This project is under license of Vero Polegre

⭐️ How to reach me!

📩 Or if you want to send me an email: veronicapolegre98@gmail.com

(back to top)