https://github.com/edogola4/tinytots
A modern e-commerce platform specializing in eco-friendly children's clothing and women clothing too featuring immersive animations and responsive design.
https://github.com/edogola4/tinytots
e-commerce framer-motion particles-js react react-router reactjs typed-js ui
Last synced: 4 months ago
JSON representation
A modern e-commerce platform specializing in eco-friendly children's clothing and women clothing too featuring immersive animations and responsive design.
- Host: GitHub
- URL: https://github.com/edogola4/tinytots
- Owner: edogola4
- Created: 2025-02-07T18:17:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T07:13:01.000Z (4 months ago)
- Last Synced: 2025-02-21T08:23:30.161Z (4 months ago)
- Topics: e-commerce, framer-motion, particles-js, react, react-router, reactjs, typed-js, ui
- Language: JavaScript
- Homepage: https://tiny-tots-7czf10qwv-edwins-projects-0786d4e7.vercel.app/
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TinyTots Boutique - Modern Children's Fashion Platform
A modern e-commerce platform specializing in eco-friendly children's clothing and women clothing too featuring immersive animations and responsive design.
## Features
- 🌟 Interactive particle background with `particles.js`
- 🎨 Dynamic UI animations using Framer Motion
- ⏳ Elegant loading screen with progress indicators
- 🕒 Real-time greeting based on time of day
- 📜 Auto-typing product highlights with Typed.js
- 🛒 Product filtering and cart management with Redux
- 📱 Fully responsive design across all screen sizes
- 🌈 Gradient-based visual theme with modern aesthetics
- 💬 Integrated customer support chat (Tawk.to)
- 📦 Product skeleton loading states
## Installation
1. Clone the repository:
```bash
git clone https://github.com/edogola4/tinytots-boutique.git
2. Install dependencies:
cd tinytots-boutique
npm install
3. Start the development server:
npm start
## Technologies:
**Core:** React 18, React Router 6
**Styling:** styled-components, CSS animations
**Animations:** Framer Motion, react-loading-skeleton
**State Management:** Redux Toolkit
**UI Elements:** react-hot-toast, react-icons
**Background Effects:** particles.js
**Chat Integration:** Tawk.to
## Configuration
s1.src = "https://embed.tawk.to/YOUR_WIDGET_ID";
## API Reference
This project uses the *Fake Store API* for demonstration purposes of this project.
## Key Components
**Home.jsx:** Main landing page with dynamic effects
**Products.jsx:** Product listing with filtering capabilities
**Loading.js:** Animated loading component
**Footer.js:** Branded page footer
**Redux** actions for cart management
## Contributing
Contributions are welcome! Please follow these steps:
- 1. Fork the project
- 2. Create your feature branch (git checkout -b feature/AmazingFeature)
- 3. Commit your changes (git commit -m 'Add some AmazingFeature')
- 4. Push to the branch (git push origin feature/AmazingFeature)
- 5. Open a Pull Request
## License
Distributed under the MIT License. See LICENSE for more information.
## Acknowledgements
- Fake Store API for product data
- React Community for ecosystem tools
- Popper.js for particle effects
- Tawk.to for live chat integration
- Myself for the design and coding