CodeMode365 / frontend-assignment

Frontend Assignment By Internsathi

OurStore - Frontend Assignment by InternSthi

This project is an Ecommerce site built using React/Nextjs, Redux Toolkit, Tailwindcss, ReactIcons and ReactQuery as a Frontend Assignment . It provides a frontend implementation of an Ecommerce website with API integration from fakeApi.com

Table of Contents

• Introduction
• Tech Stacks
• Features
• Requirements
• Getting Started
• Project Structure
• Available Scripts
• Contributing
• License

Tech Stacks

• React
• Nextjs 13
• Redux Toolkit - State Management
• tailwindcss
• React Icons - icon library
• ReactQuery - data fetching hook / Error handling
• Axios - Data fetching

Introduction

This project aims to demonstrate the frontend implementation of an Ecommerce site called OurStore using modern web development technologies. It leverages React as the primary JavaScript library for building user interfaces, Nextjs as the development server and bundler, Redux Toolkit for state management, tailwindcss for the UI components and React Icons for iconography.

This WebApp uses the fakeApi from https://fakestoreapi.com/

Features

• Browse and search products
• View Product detail
• Add products to the cart
• View and update cart contents
• Display alerts for various actions

Requirements

Make sure you have the following software installed on your machine:

• Node.js (version 12 or higher)
• npm or yarn package manager

Getting Started

1. Clone the repository:

   git clone https://github.com/CodeMode365/frontend-assignment.git
   

2. Navigate to the project directory:

   cd frontend-assignment
   

3. Install the dependencies using npm or yarn:

   npm install
   # or
   yarn install
   

4. Start the Development server

   npm run dev
   # or
   yarn dev
   
   

The application will be available at http://localhost:3000.

Project Structure

The project structure follows a modular approach to enhance maintainability and scalability.

Available Scripts

In the project directory, you can run the following scripts:

• npm run dev or yarn dev: Starts the development server.
• npm run build or yarn build`: Builds the app for production.
• npm run preview or yarn preview: Run the project in preview mode

Refer to the package.json file for additional scripts.

License

This project is licensed under the MIT License. Feel free to use and modify the code as per your needs.

Thank you for your interest in this project! If you have any questions orneed further assistance, please feel free to reach out. Happy coding!