regishshrestha / ecommerce

A ecommerce site made using react

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!