Assignment Title: E-commerce Development Task

Assignment Description:

In this assignment, you will create a basic e-commerce application using Next.js / React.js. You'll apply key React/Next concepts and fundamental web development skills. Your task is to develop a multi-page web application named "OnlineStore" that allows users to browse and search for products.

Instructions:

1. Fork the provided project repository to your profile and clone it to your machine to begin the project.
2. Design and implement a web application named "OnlineStore" that allows users to browse and search for products.
3. The application should have the following pages:
   • Home Page: Display a list of products with their images, names, and prices. Fetch the list from the provided API endpoint.
   • Search Page: Include a search bar where users can input the name of a product. On form submission, display a list of search results (products) fetched from the API endpoint.
   • Product Details Page: When a user clicks on a product from the search results or product list, they should be redirected to a page that displays detailed information about the product, including the product image, name, price, and description.

You can fetch data using the following API endpoint: https://fakestoreapi.com/

Requirements:

• Use React.js/Next.js to create the web application.
• Create a visually appealing UI using any CSS framework (like Bootstrap, Tailwind CSS).
• Use react query (Tanstack query) for fetching and caching the api data.
• Implement client-side routing to enable smooth transitions between pages.
• Write clean, maintainable, and well-documented code.
• Use Git for version control, committing your code regularly to the forked Git repository in your profile.
• Deploy the application to a hosting platform (e.g., Vercel, Netlify) and provide a live demo URL in your repo and the submission form.

Bonus Points:

• Making use of TypeScript for type safety.
• Use of Next.js is preferred over react
• Use of global state management with Redux toolkit, Recoil or any other state management library.
• Implement a responsive UI to improve user experience on mobile devices.
• Handle loading and error states during data fetching.
• Add a shopping cart functionality where users can add products to the cart and view the cart.

Submission Guidelines:

1. Fork this GitHub repository Assignment Repo to your own GitHub account.

2. Commit your code regularly and push the changes to your forked repository.

3. Do not create a pull request; just submit your forked repository.

4. Provide a DOCS.md file with all the technologies used and how to run the program locally.

5. Once you have completed the assignment, share the repository URL with us via the submission form.

6. Join this discord server to get an update: Join Here

• Submission Deadline: Task Submission: 2023/07/22 11:30 AM

Check out the discussion section of this repo to ask any related queries or doubts. Note: The assignment is intended to help you grasp basic concepts. Don't hesitate to ask for any clarifications in the discussion section of this repo. Good luck with your assignment!

Getting Started with Create React App

Clone git repository

https://github.com/Pankajbist/Online-Store.git

And in the project directory, you can run:

npm install

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.

You may also see any lint errors in the console.

Hurray, Your app is now running on port 3000 in your browser

Screenshots

Landing Page

Category Page

on click categories it shows 4 properties thhese are

Mens Clothing

Womens Clothing

Jewelery

Electronics

BASKET

on click basket without add any item

Empty Basket

if you add any item

Basket With Item

Contact

Pankaj Bist- [email protected]

Project Link: https://github.com/Pankajbist/Online-Store

Thank You