NC News project

A full-stack application built with React, Node, Express and Postgres.

Try it

Project Summary

NC News is the final solo project I completed with Northcoders. The project was completed in two parts for the back-end and the front-end. The back-end was built using Node.js, Express and Postgres, and the front-end was built using React and Vite, with Tailwind CSS for styling.

Back-end Development

The server implementation of the project is powered by Node.js and Express which provided a smooth learning curve for creating the REST API endpoints.

The design pattern of the back-end follows the MVC model. The basic principle is to provide a separation of concerns by having dedicated functions for handling interactions with the database, and functions to handle the request input and serve data back to the client.

TDD

The back-end was developed using a test-driven approach and uses Jest and Supertest as the testing libraries. The tests were written to ensure that the API endpoints were returning the correct data and status codes for each of the API endpoints. I ensured the coverage for all endpoints included both positive and negative tests and that the error handling was consistent across the API.

Separate utility functions were created to handle the formatting of the data returned from the database. This allowed for the data to be formatted in a consistent way across the API endpoints. The utility functions were also tested to ensure that the data was being formatted correctly.

A lit of available API endpoints can be viewed here.

Front-end Development

The front-end was built using React and Vite and uses React Router for routing. The UI was built using Tailwind CSS which provides a utility-first approach to styling. At a later stage in the development, I re-factored the data fetching to use Tanstack Query to handle the data fetching and caching. This allowed for the data to be fetched and cached in a consistent way across the application and provided a more efficient way of handling state when fetching data.

View the deployed site here.