License: © Purizu di Angelo Reale
Authors: varsnothing aka Angelo Reale
This repo is just an exercise on some engineering design patterns. I've used Next.js new pragma (App Router) to apply them, so that I could also learn that new way of using Next.js.
I didn't use Co-Pilot, nor ChatGPT. I use Sublime and Tmux. What is auto-suggestion and intelli-sense?
After a few weeks without coding, I have to say I should have been less eager to try so many new things/technologies/patterns in such a short timeframe, as that has definitely impacted my velocity and workflow. Also, TypeScript can slow things down when I'm out of stretch.
Nonetheless, I think I had a good opportunity to use a few of the things I like the most (DRY, YAGNI, KISS, SOLID, MVC, Singleton, Decorator, Curry, Flux, Interface, Gateway and other patterns). At the end I even thought of using Mutex for optimization on the context, but maybe next time.
I'm looking for a new job, and you can check my CV / book some time with me here: https://angeloreale.com
Why Libs?
react
react is an industry standard, that leverages a virtual dom to simulate user and server interactions, commiting those changes to the actual dom in the form of rendering abstractions, where nodes get hydrated with the latest state of an application
react/context-api
flux pattern is a great way to make sure any application running keeps a solid and reliable history of the actions taken by the user/server. i've tried to mimic this pattern, mostly used from tools like redux, using solely the context api, thus, breaking the state into different, isolated context/providers, and creating/enforcing a flux workflow to prevent state mismatches and unnecessary re-renders.
nextjs
it's a great and simple framework for creating csr/ssr/ssg/isr applications, with a syntax pragma that works really well with Vercel. a great tool i use for infrastructure at low/zero cost.
nextauth
it's the standard tool for simplifying auth flows in next.js
typescript
it helps with little bugs that may creep into a fast evolving app
mongo
flexible, easy to use with javascript, although with my implementation i've enforced a schema in a mongoose-esque way, to ensure there are less of the aforementioned TypeError bugs.
nodemailer
just a tool to send emails via node, useful for our passworldless login.
clsx
the tinies lib for adding business logic to css without any bootstrap, js-in-css or other jsx pragmas/css tools/preprocessors. i've used css modules for treeshaking and reducing bundle size.
prettier
nice to keep the code clean and consistent when it comes to syntax
eslint
good to catch multiple types of dark patterns.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
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.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.