🫵 Train yourself

Lire en français

🎨 Description

Welcome to the React-Tailwind-NextUI E-commerce Training Ground! This project is designed to help you master React, Tailwind CSS, and Next UI through building an e-commerce website. Dive in, explore, and enhance your skills in modern web development!

📚 Table of Contents

• What You'll Learn
• Technologies Used
• Prerequisites
• Set Up Project
• Instructions
• Tips
• Feedbacks and Help
• Resources

🧠 What You'll Learn

• 🔥 React fundamentals and advanced concepts
• 🎨 Tailwind CSS for rapid styling
• 🧩 Next UI components for sleek interfaces
• 🏗️ Creating and using screens and components
• 🛣️ Routing between different screens
• 📊 Creating and using a JSON file for data management

💻 Technologies Used

• React ⚛️
• Tailwind CSS 🖌️
• Next UI 🎁

🧰 Prerequisites

Before starting this project, it's recommended that you have:

• Basic knowledge of HTML & CSS
• Basic understanding of Tailwind CSS
• Familiarity with React fundamentals

All necessary installations have been completed. You're ready to start coding right away!

🛠 Set Up Project

Clone the project

  git clone https://github.com/alexandre95calonne/training_React-Tailwind-NextUI.git

Go to the directory :

  cd training_React-Tailwind-NextUI

Install dependencies

  npm install

Start the project

  npm run dev

📝 Instructions

⚠️ Important: The following instructions are general guidelines. Feel free to explore, innovate, and add your own components and pages. This project is your playground to learn and improve!

Create the following pages, incorporating components as you see fit:

1. Home Page:

• Hero section with featured products
• Categories showcase
• Special offers or promotions

2. Shop Page:

• Product grid or list
• Filtering and sorting options
• Pagination or infinite scroll

3. Product Details Page:

• Product images
• Description and specifications
• Add to cart functionality
• Related products

4. Cart Page:

• List of added items
• Quantity adjustments
• Total calculation
• Checkout button

5. Contact Page:

• Contact form
• Company information
• Map integration (optional)

Remember to implement routing between these pages and create a JSON file to manage your product data.

💡 Tips

• 🔍 Research and draw inspiration from existing e-commerce sites
• 🧩 Break down complex features into smaller, manageable components
• 🎨 Experiment with Tailwind CSS classes to achieve unique designs
• 🔄 Regularly commit your changes to track your progress

🤔 Feedbacks and Help

• 🐛 Encountered a bug? Open an issue!
• 💡 Have an idea for improvement? Start a discussion!
• 🤝 Want to contribute? Submit a pull request!

🔗 Resources

Documentation

• React Documentation
• Tailwind CSS Documentation
• Next UI Documentation

Design Inspiration

• Awwwards
• Dribbble
• Behance
• Muzli
• Design Inspiration
• Collect UI
• Pinterest

Figma Models

• Furniro
• Exclusive
• MegaMart
• Monito

Happy coding, and may your e-commerce project be a stellar success! 🌟