Welcome to my frontend project for an E-commerce application! Here, our focus will be on developing a user interface using React. Throughout the development process, I aim to gain hands-on experience with React components, state management, and the overall React ecosystem. The integration of a self-developed backend adds an extra layer of understanding as I work on creating a seamless end-to-end experience for our E-commerce application.
Feel free to explore both the frontend and backend codebases, provide feedback, or join me on this learning journey. Your input and suggestions are highly valued as I continue to refine my skills in both front-end and backend development with React.
My frontend project aims to provide an intuitive user experience for an E-commerce platform. We'll implement key functionalities such as user registration, login, product visualization, cart management, order creation, and the ability to view user profiles.
The frontend will consist of the following core components:
- Header: It consists of an animated banner and the main navigation menu, made up of various components such as the user or the shopping cart.
- Home: Main page of the application with banner component and product sections.
- Register: Form interface for users to register on the website.
- Login: Login screen for registered users.
- Product feed: View to display available products.
- Shopping Cart: Functionality to manage products added to the cart.
I'll use React Router to manage navigation between different views of the application. Additionally, I'll employ Context to handle global data efficiently.
The role of styling applied with SASS has given me the opportunity to combine knowledge of branding and user experience with the development and construction of the web application. Providing visual coherence always taking into account the user's point of view.
Application of SASS with its ease of creating application-wide style variables.
Take the application's responsive and mobile-first approach as a starting point when creating all components.
Ensure you have Node.js installed in your development environment.
🔧 Below is an example of how you can instruct your audience on installing and setting up your app.
- Clone the repo
git clone https://github.com/Cocera/VerdeVista_frontend_ecommerce.git
- Install NPM packages
npm install npm create vite@latest
- Ready to start!
npm start
🙌 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
