React + Next.js Workshop - 12/02/2024 @ Mohole

image generated with Midjourney v6

Requirements

• Node.js v18+
• VS Code
• React developer tools (browser extension)
• Vercel free account

What we are using

• React v18 - reactive UI library
• Next.js v14 - web framework for React
• modern-normalize - normalize browser's default styles
• tailwindcss-preflight - apply some basic global rules
• Vercel - application hosting and PostgreSQL database

Publishing

This project can be deployed on any Node.js hosting, but to keep things simple & easy we will use the Vercel free tier.

Local development

Clone the repo

$ git clone https://github.com/mohole/next-workshop

change to project folder

$ cd next-workshop

install the dependencies

$ npm ci

start the local development server

$ npm run dev

you can now check your application at http://localhost:3000.

Where to go from here

You can enhance the application in many ways:

• design a complete different UI
• add separated lists/folders of tasks
• add task creation date
• add task deadline date
• handle API errors
• add tags or color label to tasks
• search/sort tasks
• use a different persistance solution (Neon, MongoDB Atlas, Supabase, Appwrite, etc..)
• add authentication(Supabase, Appwrite, Firebase)

or more in general:

• use a pre-built UI library (DaisyUI, Ant, etc...)
• use a different styling solution (CSS Modules, Tailwind, etc..)
• adapt the concept and patterns to a different use case (blog, catalog, contacts management, etc...)

License

Released under the MIT License.