Reactify is an e-commerce application developed using React.js with Next.js and TailwindCSS. The application features the following main characteristics:
- Product Search: Allows users to search for products by category and title to facilitate navigation and find desired products.
- Add to Cart: Enables users to add products to the shopping cart with a single click, making it easy to select and purchase multiple items.
- Order History: Provides an order history where users can review and track their previous purchases.
- Dark Mode: Offers a dark mode option to enhance the user experience in low-light conditions.
- Progressive Web App (PWA): Reactify is a Progressive Web App, allowing users to install it on their devices and use it offline.
- User Data Management: The application currently manages user data for login/registration by storing it in localStorage.
- Preliminary Route Protection: Implements preliminary route protection by redirecting users to the login page if they haven't created an account or haven't logged in.
- Fake Store API Integration: The website utilizes the Fake Store API to fetch product data.
demo-desktop-2024.mp4
demo-mobile.mp4
- Product Search: Allows users to search for products based on their category and title, facilitating the search for specific items.
- Add to Cart: Users can add products to the shopping cart with a single click, streamlining the selection and purchase process.
- Order History: Users have access to an order history where they can review and track their previous purchases.
- Dark Mode: The application offers a dark mode option that provides a more comfortable visual experience in low-light environments.
- Progressive Web App (PWA): Reactify is a Progressive Web App, enabling users to install it on their devices and use it offline.
- User Data Management: The application currently manages user data for login/registration by storing it in localStorage.
- Preliminary Route Protection: Implements preliminary route protection by redirecting users to the login page if they haven't created an account or haven't logged in.
- Fake Store API Integration: The website utilizes the Fake Store API to fetch product data.
To install and run Reactify locally, follow these steps:
- Clone the repository:
git clone [repository URL] - Navigate to the project directory:
cd reactify-nextjs - Install the dependencies:
npm install - Start the development server:
npm run dev - Open your browser and visit
http://localhost:3000to access Reactify.
- Official Fake Store API: Link to the official page.
- Official React.js Documentation: Essential resource for learning about React.js and its ecosystem.
- Official Next.js Documentation: Documentation for Vite.js, a fast development tool for JavaScript-based projects.
- Official TailwindCSS Documentation: Resource for learning about TailwindCSS, a highly customizable and easy-to-use CSS framework.
- Next.js Practical Course: Course where I learned how to migrate an existing React.js project to Next.js, and subsequently customized it with my style.
- Reactify First Repository: This is the first version of this project, if you're curious, uses Vite.js instead of Next.js.
This project is licensed under the MIT License.
Lenoxo (Emanuel Padilla)
Feel free to contact me at emanuehl159@gmail.com if you have any questions, suggestions, or comments.