Welcome to NeoStore, a cutting-edge e-commerce platform designed with the latest technology to provide a futuristic shopping experience. This project incorporates modern UI/UX principles, smooth animations, and interactive features to make online shopping more immersive than ever.
| Technology | Description |
|---|---|
| Next.js | A powerful React framework for building server-side rendered applications. |
| TypeScript | A superset of JavaScript for better development with static types. |
| Framer Motion | A popular React library for animations and motion UI elements. |
| React Icons | A collection of popular icons for modern web applications. |
| Tailwind CSS | A utility-first CSS framework for creating responsive and customizable designs. |
| React Context | A way to manage state globally, used here for cart management. |
- Interactive Product Carousel: Scroll through featured products with smooth animations and hover effects. 📸
- Add to Cart with Hover Action: Products reveal an "Add to Cart" button on hover, encouraging interaction. 🛒
- Futuristic Design: Sleek, minimalistic, and modern UI with a dark mode default. 🌙
- Smooth Animations: Subtle animations using Framer Motion for a polished and engaging experience. ✨
- Mobile Optimized: Fully responsive, ensuring a great experience across devices. 📱
- Product Details on Hover: Hovering over a product reveals key information and actions like the "Add to Cart" button. 💡
Example of Featured Products section with hover animations and smooth transitions.
Before you begin, ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/your-username/neostore.git
-
Navigate to the project directory:
cd neostore -
Install dependencies:
If you're using npm:
npm install
Or if you're using yarn:
yarn install
-
Run the development server:
npm run dev
Or with yarn:
yarn dev
Visit http://localhost:3000 in your browser to see the application in action. 🎉
Here's an overview of the project's folder structure:
/neo-store
├── /components # Reusable components like Navbar, Footer, etc.
├── /pages # The main pages of the app (Home, Cart, etc.)
├── /public # Static assets like images and fonts
├── /styles # Global CSS files
├── /utils # Utility functions and helpers
├── /context # React context for managing the cart state
├── next.config.js # Next.js configuration
└── package.json # Project metadata and dependencies| Feature | Description | Status |
|---|---|---|
| User Authentication | Allow users to sign up, log in, and manage their profiles. | Planned |
| Product Ratings and Reviews | Add user ratings and reviews for products. | In Progress |
| Payment Gateway Integration | Integrate a payment service for users to complete purchases. | Planned |
| Wishlist Functionality | Allow users to add products to a wishlist for later purchase. | Planned |
| Improved Search Functionality | Add search filters and better categorization for products. | Planned |
This project is licensed under the MIT License - see the LICENSE.md file for details.
Check out the live demo of the NeoStore project here.
- Framer Motion: For their amazing animation library that makes the UI come to life. 🌟
- Next.js: For making server-side rendering easy and efficient. 🚀
- Tailwind CSS: For enabling quick, customizable styling and a clean design system. 🎨