PRODUCTION

JS/REACT BUILDS

Our React projects can vary a lot, but most of them are front-end apps that talk to some API. For those, we mostly use Vite as a build tool, often build by a simple NPX command. If we need server-side rendering or API routes in our React project, we go with NextJS.

Regardless of the type of project, we like using TypeScript. JavaScript is a pretty flexible language, but that flexibility can make things get out of control very easily. TypeScript helps give JS the structure it lacks. We recommend adding types to every custom data structure and function we have in our projects, while also using types from the third-party libraries we use whenever possible.

Project Structure

The project structure can also vary from project to project, but most of them will have a src folder with the following subfolders:

assets: for images, SVG icons, fonts, etc
components: for React components, where each component goes inside a folder of its own
constants: for any kind constant data shared by multiple components
contexts/providers: for context providers
data: for larger amounts of static data needed by the project
hooks: for custom hooks we might create
pages (React Web)/screens (React Native): for page-level components
services: for API requests
types: for type definitions, as mentioned earlier
utils: for utility functions like data formatting

Whenever possible, every one of these main folders should have an index.ts file, exporting the contents of the folder. That way, we can do import { MySubComponent } from '@/components' instead of ... from '@/components/MyComponent/MySubComponent/MySubComponent'.

Configuration (ESLint/Prettier/TypeScript)

We don't use a default settings file for ESLint/Prettier/TypeScript, as each project has its own needs. However, we do follow the same general patterns. This repository is a good model for what configurations we use. In terms of syntax, the main points are:

We like 2-space indentation
We like semi-colons
We like single quotes inside JS/TS code and double quotes on HTML/JSX code

In terms of code organization:

We like imports in alphabetical order (we have an ESLint/Prettier plugin that does this for us)
We don't like unused variables
We don't like TypeScript errors (although we do silence some errors with @ts-ignore, always trying to add a good reason for it in a comment)

When it comes to TypeScript and compiling configuration, we don't do anything fancy. The main thing is we love being able to import modules using @.

Preferred Libraries

Each Mellenger project has different requirements, and we use a vast number of libraries to accomplish the project's goals. Nevertheless, there are some recurring names you might see in our projects.

We like using Axios for HTTP requests
We like to fetch, cache, and update data using React Query
We routing on front-end-only apps with React Router
We've been experimenting (and having a great time) with Mantine for UI components and utilities (modals, hooks, date pickers, etc)
We mostly do state management with React's default Context API, but we've used Zustand too

Code Editor and Extensions

We all use Visual Studio Code, which offers a multitude of great extensions for web development. Each developer has their own favorites, but we do rely on ESLint and Prettier to keep our code on the same page (remember to make Prettier your default formatter). For other extensions, take a look at the VS Code section in the Design & Development Tools page.

If you have any questions, please don't be afraid of asking them to one of the other devs. We're a pretty friendly bunch. :)

Page updated

Report abuse