Product Review and management demo app

Introduction

A customer feedback demo application for collecting reviews for a product after a successful purchase.

Table of contents

• Product Review and management demo app
  • Introduction
  • Table of contents
  • Major Features
  • Upcoming features
  • Preview
  • Tools and technologies
  • Getting Started
  • Notes
  • Running locally
  • Extra notes
  • Viewing test coverage
  • Using Docker
  • Author
    • Precious OSSAI
  • Inspiration
  • Disclaimer

Major Features

• View all comments/feedback/reviews from customers on a product.
• Customer can create feedback by entering their name, email, rating and comment
• Display product performance based on the reviews by showing a graphical preview in a chart format and the percentage of reviews above 2.

Upcoming features

• Paginate records for reviews.
• Application logging with tools like Sentry and Hotjar
• Husky for running pre-commit tests before pushing code to SCM's like GitHub

Preview

This applicaiton is currently deployed on vercel, a demo preview can be seen on this Preview Link

Tools and technologies

Below are the main tools and technologies used in this project:

• NextJS - UI Framework
• ReactJS - Frontend UI library
• Cypress - E2E, integration and unit tests
• ChakraUI - Design system, theming and accessibility
• ESLint - Linting
• TypeScript - Type checking
• Formik - Form validation
• Axios - HTTP requests
• Chart.js - Data representation package (e.g. Charts, graph)
• Mongoose - NoSQL Database
• Google Analytics - Metrics and usage
• CircleCI - Continous Integration
• Docker - Containerisation

Getting Started

1. Setup environment variables

   • Create a .env file at the root directory of the project
   • Copy the content of the .env.example file onto it
   • Update the values as required. e.g. API_URL=http://localhost:3000/api

2. Development and Testing

   Notes

   Before proceeding with this section, kindly ensure that your terminal window is open on the root directory of the project, you can use the below helper commands to check/confirm:

   • cd command to change directory e.g. cd path/to/project
   • pwd command to check your "print working directory"
   • ls command to show the content of your current directory

   By default the dev script runs on port 3000, if you have another application making use of that port on your machine, you can either terminate that process/application or use the --port flag where necessary to change the running port, kindly remember to update any relative script found on the project e.g. the package.json and Dockerfile.

   Running locally

   # Step 1: Install dependencies
   $ npm install
   
   # Step 2: Run Nextjs and cypress in interactive mode concurrently
   $ npm run develop

   Extra notes

   Other commands can be found on the package.json file in the root directory of the project.

   Viewing test coverage

   Please note that you need to have run the cypress tests at least once before a report can be generated which would be located here: coverage/lcov-report/index.html, you can directly open it by navigating to the folder or via your terminal with the below command:

   $ open coverage/lcov-report/index.html

   Using Docker

   Before proceeding with the below command, ensure Docker is installed and running on your machine.

   # Runs Nextjs within a docker container
   $ docker-compose up

Author

Precious OSSAI

• LinkedIn
• Website
• GitHub
• Dribbble
• Email

Inspiration

• checkout.com

Disclaimer

This is a demo project for proof of concept only.