Table of Contents

1. Introduction
   • Technologies and libraries
2. Getting Started
   • Prerequisites
   • Installation

Introduction

A full-stack, mobile-first Next.js portfolio application designed to allow users to add their personal information (full name, brief description, and professional skills) and the projects they have worked on in the past, through an admin page.

Premise n.1: Being a simple CRUD application with no super complex features, the array of technologies used might appear overkill and it probably is. Though, while extensive typing and data validation using React Hook Form and Zod may seem unnecessary, this setup ensures that the project is ready for future expansions. Code quality and predictability are fundamental, especially in full-stack applications.

Techniques such as:

• using TypeScript + React Hook Form + Zod to ensure a smooth development experience regarding form handling and data validation, also with the benefit of having types and UI errors directly inferred from the defined schemas;

• utilizing a global styling theme to ensure look and feel consistency across the application and leveraging Emotion variables and functions (e.g. the mediaQueries utility) to make the code more readable and maintainable;

• Abstracting asynchronous @tanstack/query logic with custom hooks to avoid "useEffect hell" and semplify the process of fetching and updating data from the client;

surely are some good practices to go in the right direction.

Premise n.2: Despite using Next.js 14.2.5, the application still leverages the pages router instead of the new app router, because of some limitations and lack of support with Emotion and styled-components.

Premise n.3: All the pages (Home, About, and Admin) are generated statically at build time using the Next.js Static Site Generation (SSG) feature. Considering the nature of this portfolio application, there was no need to implement a heavy server-side rendering (SSR) solution.

Tech and libraries

This section should list any major frameworks/libraries used to develop the application.

• Next.js
• TypeScript
• TanStack Query
• Emotion
• Zod
• Mongoose
• Jest
• React Testing Library

Getting Started

To get a local version up and running download these dependencies and follow the nextsteps:

Prerequisites

• Node.js (>= 14.x)
• MongoDB (>= 4.x)
• npm (>= 6.x)

Installation

1. Clone the repository from GitHub

git clone https://github.com/GraMya96/nextjs-portfolio-app.git

2. Install needed NPM packages

npm install

3. Create a MongoDB instance on your local machine (you can use MongoDB Compass or any other tool of your choice) and save the Connection String URI; you will need it in the next step.

4. Create a .env.local file in the root directory and add the following variables:

• CLIENT_URL=_your-client-url*
• DB_URI=_your-mongodb-uri*

5. Run the application, making sure that MongoDB is running locally

npm run dev

6. Open http://localhost:3000 with your browser to see the result.

7. To run component testing, run the following command:

npm run test

(back to top)