Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pankubhaiya/nextjs-product


https://github.com/pankubhaiya/nextjs-product

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
## Project Overview



The task involves developing a web application that allows users to browse through a list of products categorized by various parameters. Users should have the capability to sort and filter products based on criteria such as categories, price range, gender, occasion, and discount. Furthermore, the application should empower users to seamlessly edit and delete their selected products, with these modifications being promptly reflected in the user interface.



## Github Repo:



https://github.com/enacton-tech/mern-stack-task



### Video Explanation



https://app.usebubbles.com/kG9NjR5kqBCssXm1yA5dZt/mernstack-interview-task-walkthrough



### Setting Up the Project



To set up the project locally, follow these steps:



1. Clone the repository and navigate to the project folder.

2. Import the product_database.sql file in to your MySQL database (you can use phpMyAdmin).

3. Update the .env file with your own MySQL credentials.

4. Run `npm install --force`.

5. Start the project using `npm run dev`.

6. Access the NextJS website at http://localhost:3000.

7. Setup the database, You would need mysql and workbench for the database. You can get it from here: https://dev.mysql.com/downloads/installer. To Import data in do refer to this document: https://dev.mysql.com/doc/workbench/en/wb-admin-export-import-management.html



### Requirements



#### Project Setup



1. **Project Setup**: Ensure proper project setup as per the provided instructions.



#### Pagination for products



2. **Main Section**: Display a paginated list of product in the main section.



#### Product Sorting and Filtering



3. **Product Sorting**: Implement options for sorting products based on price, creation date (created_at), and rating.

4. **Brand Filter**: Enable product filtering by the chosen brand and emphasize the selected brands within the respective tab.

5. **Category Filter**: Allow product filtering by the selected category and highlight the chosen category within its designated tab.

6. **Price Range Filter**: Provide the ability to filter products based on the selected price range and highlight the chosen range within its dedicated tab.

7. **Occasion Filter**: Enable product filtering based on the selected occasion and highlight the chosen occasion within its specific tab.

8. **Discount Filter**: Implement product filtering based on the selected discount and highlight the chosen discount within its dedicated tab.

9. **URL Parameters**: Store all filter and sort options in the URL parameters to replicate the user's browsing state when sharing URLs.



#### Product Operations (Create/Edit/Delete)



10. **Create Product**: Allow users to crete product.

11. **Edit Product**: Allow users to modify specific product details.

12. **Delete Product**: Provide the functionality to remove a particular product from the list.



### Delivery Expectations



1. **Code Repository**: Push the code to a public GitHub repository.

2. **Documentation**: Provide well-documented code with a comprehensive README file.

3. **Setup Instructions**: Include clear instructions on how to set up and run the project.

4. **Application Demo**: Record a video demonstrating the application's functionality.



### Evaluation Criteria



Candidates will be evaluated based on the following criteria:



1. **Functionality**: Does the application meet all specified requirements?

2. **Code Quality**: Is the code well-structured, readable, and maintainable?

3. **Documentation**: Is the codebase well-documented with clear instructions?

4. **User Experience**: Does the application provide a smooth and intuitive user experience?

5. **Technical Proficiency**: How effectively does the candidate utilize relevant technologies and APIs?

6. **Delivery Quality**: Does the candidate deliver all expected deliverables with high quality?



## Conclusion



We're thrilled to witness your skills in action as you tackle this project. Your dedication and creativity will play a vital role in crafting a seamless user experience. Best of luck, and we're excited to see your contributions!