A modern, responsive e-commerce platform specializing in eco-friendly children's and women's fashion. Built with React and featuring smooth animations, this platform offers a delightful shopping experience with real-time interactions and intuitive navigation.
| Feature | Preview |
|---|---|
| Home Page |  |
| Products Page |  |
| Navigation |  |
-
🌟 Immersive Experience
- Dynamic hero section with time-based greetings
- Smooth page transitions and micro-interactions
- Animated loading states for better perceived performance
-
🛍️ E-commerce Functionality
- Product browsing with filtering options
- Shopping cart management
- Responsive design across all devices
-
🎨 UI/UX Highlights
- Modern, clean interface with gradient themes
- Intuitive navigation and clear CTAs
- Accessible and keyboard-navigable components
-
🚀 Technical Features
- State management with Redux Toolkit
- Responsive layout with mobile-first approach
- Optimized performance with code splitting
- Live chat support integration
- Node.js (v14 or later)
- npm (v6 or later) or Yarn
-
Clone the repository
git clone https://github.com/edogola4/tinytots-boutique.git cd tinytots-boutique -
Install dependencies
npm install # or yarn install -
Start the development server
npm start # or yarn start -
Open in browser The application will be available at http://localhost:3000
-
Navigate to the server directory
cd server -
Install dependencies
npm install # or yarn install -
Set up environment variables
- Create a
.envfile in theserverdirectory - Add the following variables:
PORT=5000 MONGODB_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret
- Create a
-
Start the backend server
npm run dev # or yarn devThe API will be available at http://localhost:5000
| Category | Technologies |
|---|---|
| Core | React 18, React Router 6 |
| Backend | Node.js, Express, MongoDB, JWT |
| Styling | styled-components, CSS3 |
| State Management | Redux Toolkit |
| Animations | Framer Motion |
| UI Components | React Icons, React Hot Toast |
| Analytics | Vercel Analytics |
| Chat | Tawk.to |
tinytots-boutique/
├── server/ # Backend server
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ ├── controllers/ # Request handlers
│ │ ├── middleware/ # Custom middleware
│ │ ├── models/ # Database models
│ │ ├── routes/ # API routes
│ │ └── utils/ # Utility functions
│ ├── server.js # Entry point
│ └── package.json # Backend dependencies
├── public/ # Static files
├── src/
│ ├── assets/ # Images, fonts, and other static assets
│ ├── components/ # Reusable UI components
│ │ ├── common/ # Shared components
│ │ ├── layout/ # Layout components
│ │ └── ui/ # Basic UI elements
│ ├── pages/ # Page components
│ ├── redux/ # Redux store and slices
│ ├── styles/ # Global styles and theme
│ ├── utils/ # Utility functions
│ ├── App.jsx # Main application component
│ └── index.js # Application entry point
├── server/
│ ├── src/
│ │ ├── config/ # Configuration files
│ │ ├── controllers/ # Request handlers
│ │ ├── middleware/ # Custom middleware
│ │ ├── models/ # Database models
│ │ ├── routes/ # API routes
│ │ └── utils/ # Utility functions
│ ├── server.js # Entry point
│ └── package.json # Dependencies and scripts
├── .gitignore
├── package.json
└── README.md
Create a .env file in the root directory and add the following:
REACT_APP_TAWK_TO_WIDGET_ID=your_tawk_to_widget_idThis project uses the Fake Store API for demonstration purposes. For production, replace with your own API endpoints in the API service files.
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/your-feature-name - Open a pull request
Please make sure to follow the existing code style and add tests if applicable.
This project is licensed under the MIT License - see the LICENSE file for details.
- Fake Store API for providing mock product data
- React Community for the amazing ecosystem
- Framer Motion for the smooth animations
- Tawk.to for the live chat functionality
- All contributors who have helped improve this project