Skip to content

Instantly share code, notes, and snippets.

@fahshed

fahshed/gist.md

Last active April 9, 2025 07:55
Show Gist options
  • Save fahshed/1c79ed1a1e5fd1588e931edd9e135575 to your computer and use it in GitHub Desktop.
Save fahshed/1c79ed1a1e5fd1588e931edd9e135575 to your computer and use it in GitHub Desktop.
Download ZIP
Building a Website like NJT Automation
Raw
gist.md

Frontend:

  • If there is no dedicated UI design team, I like to sketch up a few pages of the website I am making and show the design to stakeholders to get on the same page. It also makes the vision a lot clearer.
  • I choose a UI component library. For vanilla React I use Material UI. But for Next.js, shad/cn UI (tailwind based) or Mantine UI goes nicely. They are also very lightweight and have some good design out of the box.
  • Since there is a shopping cart on the website which could require robust state management, I would use a Redux like lib. The react context would be good for themes and colors mostly. The state management lib will also help with User sessions.
  • For API calls I like to keep all my API calls in a separate API client file and make use of axios to call the APIs with appropriate tokens.
  • Recent Next.js versions suggest to use App router for optimization so we can go with that.
  • Finally, build the code base by coding reusable components and using those components to build full pages.
  • I ensure consistency in font size, colors by using the theme constants of the UI lib that I’m using.
  • All components will be functional and I write utility function to make the code more modular.
  • We will use SSR to render most static contents.

Backend:

  • The codebase will be divided into 3 layers, controller, service and repository for separation of concerns.
  • Since, the scope of the website seems to be Inventory look up with a Shopping Cart, we don’t need to make it micro-service, a mono-lith backend should be fine.
  • We could use a managed authentication service like Firebase Auth or others. We can also write JWT based authentication from scratch and protect our routes with express middleware.
  • If the site is user-less then we can use cookies to handle sessions.
  • I always use an ODM to interact with DB

Database:

  • A well-thought-out schema design is very important.
  • The default document IDs in MongoDB are very useful for looking up stuff
  • The information will be here, but we can move artifacts like images and videos to a cloud storage bucket like GCP bucket or Amazon S3

All across the stack I like to use linters while developing to enforce best practices and conventions. We could dockerize the backend if there are many dependencies, specially non-NPM. If we have time in hand, we could spend some of that by adding valuable Unit tests in both frontend and backend, not just to improve line coverage, but to prevent breaking changes and bugs. The front-end would be easily deployed in Vercel. I would choose GCP to host the backend in a Compute Engine (which has autoscaling capabilities) because I am most familiar with it. The Mongo cloud is part of GCP so that will be convenient too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment