Sample app developed with TypeScript, Next.js and Styled Components.
Some key features:
- Implemented a Skeleton Loader to increase perceived performance during data fetching and avoid Content Layout Shift.
- Implemented debouncing in the search input to avoid unnecessary API queries while the user is still typing.
- Ensured accessibility of the page (e.g. using aria-live to announce order updates or errors to screen reader users).
More screenshots
- Node 18.x
- NPM >= 7.x
- Clone the project repository
- Install the dependencies
npm install
- Build the project with
npm run build
- Run the project with
npm run dev
- Start the server with
npm run server
To run the tests, use npm run test
- This project was bootstrapped with Create Next App.
- JSON server will give you a fake but realistic REST API using the static
server/db.json
file created after runningnpm install
. If you make POST, PUT, PATCH or DELETE requests, changes will be automatically saved todb.json
.
- React
- Next.js
- CSS with Styled-Components
- TypeScript
- Jest and React testing library
src/
components # Some components already built
hooks # Some useful react hooks
icons # The icons used within the project
pages # next.js pages directory, where you find the homepage named index.jsx
test # Mocks for testing
theme # Some base styles used across the project. You'll find the color variables here
types # TypeScript types
public/ # files within this folder are publicly available. i.e. http://localhost:3000/favicon.ico
products # product images
server # A fake API
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
JSON server will run concurrently in watch mode on port 4002 - http://localhost:4002.
Resets db.json
to the original initial data (db.base.json
).
This script runs automatically after npm install
.
Runs the Jest unit tests.
GET http://localhost:4002/products
: get the full list of productsGET http://localhost:4002/products?name_like={substring}
: search for products where the name includes{substring}
POST http://localhost:4002/orders
: create a new order.- Expects a JSON body object with
productId
- The productid
valueamount
- The amount numbercolor
- The value of the color select field
- Expects a JSON body object with
A few of the choices/decisions I've made:
- Migrated to TypeScript to enhance type safety across the project.
- Did not upgrade library versions besides focusing on removing high vulnerabilities.
- To ensure accessibility was covered I used tools like Wave and Axe browser extensions and tested with Mac's VoiceOver screen reader.
- Introduced a Skeleton Loader to enhance perceived performance during data fetching.
- Implemented debouncing in the search input to avoid unnecessary API queries while the user is still typing.
- Used UserMessage component to give feedback to the user in the case of errors, informational messages or edge cases. This uses aria-live to announce changes to screen reader users.
Other aspects I would consider for production readiness:
- Setting up a CI/CD pipeline for automated testing and deployment.
- Implement more comprehensive testing (e.g. e2e or screenshot testing or jest-axe for a11y).
- Evaluate the use of the Context Provider API or alternative state management solutions as the complexity grows (e.g. stock management)
- Ensuring that the API responses are correct and conform to a given schema.
- Further SEO considerations: SSR, finalising metadata tags (e.g.,
og:image
,og:url
) or incorporating JSON-LD structured data for richer search results. - Ensuring consistent theming (e.g. spacing) and further layout improvements (e.g. for wider screen users).
- Adding a React error boundary.