SuggestionBox

Suggestion Box is a simple and intuitive platform that allows users to create and submit bug reports or suggestions. Users can choose to provide their name and email or submit feedback anonymously. SuggestionBox provides a seamless experience to easily submit feedbacks.

https://www.loom.com/share/e63e364e5148414580c5ca33d4f94e18?sid=4c66da72-d48e-4a44-8428-04cd9bad6f8a

Technologies

Suggestion Box utilizes a modern technology stack to ensure a reliable, efficient, and scalable platform, incorporating the latest tools and best practices in web development for both the backend and frontend.

For deployment, both the frontend and backend of Suggestion Box are containerized using Docker. This approach simplifies the setup and deployment process, ensuring consistency across different environments.

The project is structured as a monorepo using TurboRepo, enabling developers to work on different parts of the project independently. This setup makes local development simpler and more efficient.

Backend

• Express.js: Fast, unopinionated, minimalist web framework for Node.js.
• TypeScript: Typed superset of JavaScript that compiles to plain JavaScript.
• MongoDB: NoSQL database for storing data.
• Mongoose: Elegant MongoDB object modeling for Node.js.
• AJV: JSON Schema Validator for security and reliability of JavaScript applications
• Vitest: A blazing fast unit-test framework powered by Vite.
• Winston: A versatile logging library.
• Swagger: API documentation tool.
• ESLint: Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

Frontend

• Vue: The Progressive JavaScript Framework. Version 3.
• Nuxt: The Intuitive Vue Framework.
• TypeScript: Typed superset of JavaScript that compiles to plain JavaScript.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• ESLint: Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
• Vitest: A blazing fast unit-test framework powered by Vite.
• Storybook: Frontend workshop for building isolated UI components.

Install

The project is dockerized for easy installation and deployment.

1. Clone the project repository

git clone https://github.com/JohnAdib/suggestion-box.git

2. Navigate to the project directory

cd suggestion-box

3. Copy the env file

Copy the env.sample file in the root directory and rename it to .env and if you want edit the .env file to set your environment variables as needed.

cp env.sample .env

4. Run with Docker

Start the project using Docker. This command will build the necessary Docker images and start the containers in detached mode (-d).

docker-compose up -d

If you wann to double check, open Docker Desktop. You should see three containers running under the name suggestion-box.

• mongo Container for MongoDB database
• backend Container for the backend API with Express
• frontend Container for the UI with Nuxt

5. Access the application

Open your web browser and navigate to localhost:7020. If you've configured a different port in your .env file, replace 7020 with the appropriate port number. You should now see the Suggestion Box application running in your browser.

http://localhost:7020

Run Locally

To run the project locally for development, you can use npm and TurboRepo to manage both the frontend and backend. Make sure MongoDB is installed on your system, or alternatively, you can use Docker to simplify the setup.

First install the project dependencies

npm i

Then run the following command to start both the frontend and backend servers concurrently. This command uses TurboRepo to manage the monorepo structure.

npm run dev

Testing

Unit tests are written using Vitest. To run the tests, use the following command

npm run test

Future Improvement Checklist

Due to time constraints, some planned features and improvements were not implemented in the current version of Suggestion Box.

• Add more tests for improved code coverage.
• Implement Storybook for UI component development.
• Add pagination functionality in UI.
• Add filtering functionality in UI.
• Add sorting functionality in UI.
• Improve accessibility features.
• Improve accessibility features.
• Optimize frontend and backend performance.
• Integrate CI/CD pipelines for automated deployment.
• Set page title and description
• Add social media meta and image
• Add a favicon for a more polished user experience.
• Optimize UI codes by moving repeated UI elements into separate components.
• Implement type checking for TypeScript in Nuxt.
• Explore additional features based on user feedback.