Description

Demo Full-stack project deployed at Vercel Cloud. It has CRUD features (Create, Read, Update, Delete) built with Next.js bootstrapped with create-next-app.

Tech Stack

Front-end

Next.js
TypeScript
React
Sass
HTML 5
CSS 3
Local Storage
JavaScript

Back-end

Next.js
Node.js
TypeScript

Getting Started

Install the dependencies with:

npm install
# or
yarn install

Set the required configuration environmental variables by:

creating a .env.local file
set the NEXT_PUBLIC_HOST to http://localhost:3000

Run the development server:

npm run dev
# or
yarn dev

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

Now you can start to modify the files and the dev live-server will auto-update the result in the browser.

Folder structure

Public static content is placed inside the /public folder which is mapped to /*
The pages/routes are placed inside the /pages folder which is mapped to /*
The re-usable components/modules are placed inside /components to be consumed from inside the pages/routes.
There are some script utilities inside the /helpers folder.
Inside the /config folder there is a configuration object that loads some variables/constants in order to be used within the app.
The API Routes are placed inside the /pages/api folder which is mapped to /api/*. Files in this directory are treated as API routes rather than React Pages. e.g. http://localhost:3000/api/goals. This endpoint can be edited in pages/api/goals.ts.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.
API routes - Introduction to Next.js API Routes
the Next.js GitHub repository

Deploy on Vercel

For deployment, we use the Vercel Platform from the creators of Next.js.

However, there is another interesting alternative we'll explore: Metacall.io.

Check out the Next.js deployment documentation for more details.

algife/Goal-Tracker-Nextjs-React-Full-stack-App