Frontend Mentor - Product feedback app solution

This is a solution to the Product feedback app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Developer Setup
• Author

Overview

The challenge

The challenge is to build out this product feedback application and get it looking as close to the reference design as possible.

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete product feedback requests
• Receive form validations when trying to create/edit feedback requests
• Sort suggestions by most/least upvotes and most/least comments
• Filter suggestions by category
• Add comments and replies to a product feedback request
• Upvote product feedback requests
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

Expected Behaviour

• Suggestions page
  • Only product feedback requests with a status of suggestion should be shown on the Suggestions page.
• Roadmap
  • Feedback requests with a status of planned, in-progress, or live should show up on the roadmap, and should be placed in the correct column based on their status.
  • Columns should be ordered by upvote totals.
• Creating a product request
  • When creating a new piece of feedback, an ID needs to be assigned which increments the current highest product request ID by 1.
  • The default status for a new piece of feedback is suggestion. This places it on the Suggestions page.
• Editing feedback
  • If a piece of feedback has its status updated to planned/in-progress/live it moves through to the roadmap and should show up in the correct column based on its new status.
• Add comments/replies
  • Use the data from the currentUser object in the data.json file to populate the user data for any new comments or replies.
  • Any comment/reply can have a maximum of 250 characters.

Screenshot

Links

• Repository
• Live Site
• Solution URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Remix - a full stack web framework.
• React - JS library.
• Reach UI - React-based design system.
• Prisma - Next-generation Node.js and TypeScript ORM.
• Cypress - JavaScript end-to-end testing framework.
• Vitest - A blazing fast unit-test framework powered by Vite.
• Testing Library - Simple and complete testing utilities that encourage good testing practices.

What I learned

• The testing configuration, using vitest is based on the Indie Stack from the Remix stacks starter project. I also used the "Testing JavaScript" course by Kent C. Dodds to help me on my journey in testing this Frontend Mentor challenge.
• Creating a recursive component: This was used in the display of comments in the feedback detail view. Currently, in the interest of time and limitations in Prisma's query structure, only three levels of nesting are displayed.
• React Pre-rendering and Potential Hydration Issue: This was used to resolve a React browser warning when updating the upvotes from local storage, but the upvote count in the database was different.

Continued development

I initially started this project with a Next.js implementation. I will likely revisit that implementation and make changes based on what I've done here.

I decided to re-implement in Remix, to go back to my roots in web development. Other than learning basic TypeScript as part of this (and the initial Next.js implementation), I managed to simplify the app significantly.

Finish building end-to-end testing for this project.

Useful resources

• My Custom CSS Reset
• A Modern CSS Reset
• Notes on Josh Comeau’s Custom CSS Reset
• A Complete Guide to Flexbox
• A Complete Guide to Grid
• React TypeScript Cheatsheets
• UI Events KeyboardEvent key Values
• React + TypeScript: Handling Keyboard Events
• Forwarding React Refs with TypeScript
• Hiding Content for Accessibility
• How-to: Hide content
• Visually Hidden
• Remix: Sharing Your Index Layout with Sub-Routes
• Remix | Styling
• How to Use PostCSS as a Configurable Alternative to Sass
• Styling Remix using Tailwind and PostCSS
• Using localStorage with React Hooks
• toTitleCase | 30 Seconds of TypeScript
• How to Test HTTP Responses and Redirects with Cypress
• Setting up Cypress with axe for accessibility
• Using multiple .env files
• Isolated Integration Testing with Remix, Vitest, and Prisma

Developer Setup

1. This project is configured for Node.js version 16+ and npm version 8+.
2. Clone the Repository and checkout or create the branch on which you wish to work.
3. Copy the env.example file and save it as .env.
4. Update the DATABASE_URL variable to point to your database environment.
5. At the shell prompt, in the project folder, if using NVM, type nvm use to configure the version of node and npm.
6. At the shell prompt, type npm i to install the project dependencies.
7. At the shell prompt, type npx prisma db push to configure the database.
8. At the shell prompt, type npm run db:seed to seed the database with sample data.
9. At the shell prompt, type npm run build to check that the project builds successfully.
10. At the shell prompt, type npm run dev to start the dev server.

Author

• Website - www.richardcyrus.com
• Frontend Mentor - @richardcyrus