How to develop your startup or where to start a hackathon in 2024? (part 1)
Let's try to assemble our ideal boilerplate for full-stack development. In this article we will gradually assemble a template for quickly launching startups.
I warn you right away that the article will be holivar, I ask all haters to comment, propose solutions with reference to public cases.
What will we collect?
We will collect a template for B2B web applications. Let's start with choosing technologies for the front-end part. Let's focus on development speedthe availability of ready-made examples and the size of the community. Not we will use any vendorlock libraries, our project Not should depend on the specific service provider. We will use 100% Open Source technology without additional commercial fees and paid licenses. No Vendor Lock-in and custom reviews from vendors!
Disclaimer about the experience of the author of the article
It so happened that I had to develop projects with a back-end in python/django, python/flask, python/asyncio, node/express and even ruby/rails. I taught a course on web development at university.
Worked in large companies where several teams work on one product. And startups, where one team does what an enterprise cannot. I saw microservices and monoliths.
This experience will influence the choice of technologies; there is no way to get rid of it.
We need to understand that if our startup is successful, then we would I didn't want to rewrite everything from scratch due to poor choice of technologies, it is expensive.
Front-end
It is increasingly common to talk about “meta-frameworks” (front-end meta-frameworks). Today we can highlight Angular, Astro, Next.js, Remix, Nuxt, SolidStart, SvelteKit. They all look after each other, absorb and adapt each other's ideas and approaches. If you are interested in comparing features in more detail, I would recommend report by Addy Osmany at Google I/O 2024 (slide taken from there), plus there is prismic blog article “Understanding the JavaScript Meta-framework Ecosystem” with a cursory look at meta frameworksand a whole bunch of comparison articles react vs vue, svelt vs react etc. These articles have a limited lifespan; they lose their relevance with each new release, as frameworks take features and ideas from each other.
There is a good one comparison of popularity based on “stars” on Githubit correlates with the size of the community and trends in the JavaScript world.
Here you can see how vue was at some point more popular than react, or how jQuery is gradually losing popularity. Besides the stars, according to stackowerflow surveyNode.js and React.js are the most common web technologies used by all respondents.
Considering the trends, we can say that React (presented on the first slide as the Next.js meta-framework) does not allow anyone to overtake itself.
We will use React + Next.js as it most popular starter kit.
Where to start figuring it out? If you don't know anything about React, then your best bet is with https://react.dev/learn. And for Next.js the best place to start is with https://nextjs.org/docs.
But one framework is not enough. For quick development we need a UI library.
UI library
Good a review of React UI libraries with a detailed description is on the prismic blog.
There are actually two leaders: MUI (Material UI) and Ant. MUI has a paid version with an expanded set of components. For example, if you want to be able to sort table columns using Drag & Drop, then MUI you will need pro versionwhile in Ant is available without payment in examples. In general, Ant has a little more examples and ready-made components.
Bootstrap & others
I didn't highlight Bootstrap, although he does have an example based on Next.js. It has few complex B2B components. It is worth paying attention to examples of forms and tables; these are the most complex components. And here Ant wins again with its examples.
Starter set of b2b components
So that we do not have to invent Layout, Auth and Permission components, do not create a library for receiving data and do not create our own tools for realtime data updating, we can take refine.
This is a set of React components that one way or another have to be invented for any B2B application. I I recommend going through the official tutorial to understand the basic concept and basic abstractions used in Refine.
Refine has a set of templates for admin panels with ant support and mui, which can be used for a quick start. This is suitable for a quick start to a b2b startup.
Translation support
We will immediately make our product international and we will need something for internationalization. But, if you are struggling for the size of the front-end bundle, then you can not use translations at all or use something of your own in vanilla-js. I love libraries with the ability to upload translations to a service to give to a professional translator or ChatGPT.
What are the options? IN Next.js documentation contains all popular i18n libraries. From this list we can highlight react-i18next, lingui and tolgee, they are associated with cloud services for translations. Let's choose react-i18next, as it has the option boost your translation service with some logic and do not depend on the cloud provider and examples of integration with refine.
Assembly
We have chosen the technologies, now all that remains is to collect it all in one place.
We will use a monorepository because… we won't have time to switch between projects and practice refactoring in several repositories at the same time. If our project becomes big, we can always split it up.
To organize work in a monorepository we will use workspaces. To make our project assemble faster, we will use turboit will speed up the build of the project and works well with Next.js.
A few words about Nx and Lerna
There are several more interesting tools for working in a monopository that can be mentioned:
Nx is a more complex build tool for working with monorepositories, supporting multiple languages. It has a flexible plugin system for all occasions. Allows you to set restrictions on the use of internal libraries within a monorepository. This is a more mature project that includes many additional features. Until we need it all. We need fast incremental builds without any complications. I don’t want to take a course on nx just to speed up the project assembly. Can be read comparison nx vs turbo from the authors nx. From the nuances: Nx can add features when working with a monorepository and not all libraries can work with Nx out of the box. There are a couple more links on the topic: 1, 2.
Lerna often used in conjunction with Nx, adds convenient features for publishing packages to NPM, automatically increasing package versions, generating changelogs, creating releases on GitHub, etc.
Package all external dependencies. We will have packages/ui — for all external UI libraries and React components and packages/i18n – for translations. We will place the code for our front in apps/web.
What happened?
I put together a monorepository for the front, based on React, Refine, Antd, i18next, Next.js. The project supports translations and detects the user's language. Support for styling Antd components with the ability to switch dark and light themes.
The result can be seen in github repository And demo deployed on versel.
The article turned out to be voluminous and only affects the front-end, if it gains popularity, then I will continue the assembly, and we will look at what options there are for the back-end.
Let the holiwar begin in the comments. Write your suggestions and thoughts.
