Codebase Tour Of An Advanced React / Next.js Project

The code on GitHub: github.com/profydev/prolog-app
The folder structure is inspired by Bulletproof React: github.com/alan2207/bulletpro...
If you’d like to work on this codebase get on the waitlist for the React Job Simulator: profy.dev/waitlist
00:00 - First Marker
00:17 - available scripts in package.json
01:09 - folder structure
02:16 - ESLint
03:03 - Prettier
03:58 - TypeScript
05:41 - Husky & lint-staged
07:24 - Cypress
07:49 - Jest
07:54 - Storybook
08:21 - styled-components
08:53 - Continuous Integration With GitHub Actions

[@annusingh4694]

Loved this video 💯

[@MBK90210]

I really love this, wasnt able to join your first cohort due to monetary constraints but I hope you will make all the materials available at a later stage when someone interested is finally able to sign up.... I try to consume as much of the free material as I can

[@profydev]

Thanks a lot for the feedback. That means a lot. I'll try to make the job simulator as affordable as possible with PPP discounts. Hopefully that'll help you :)

[@ssj1260]

Great video, incredibly valuable to see how different the structure of the project looks compared to my own. Quick question. In the project, in features > projects > components > project-card > index.ts, it just contains one line export (export { ProjectCard } from "./project-card") The same with ui > index.ts, it just has all the export * from ./badge etc. What is the purpose of this? I haven't seen this before.

[@profydev]

Thanks a lot for the feedback. Honestly, this is just one of many options for folder structures. From my experience you also often see the typical components, contexts, and hooks folder structure in production projects. As for the index.ts file: People call this the "public API" of the component (or whatever is in the file). This file decides what parts of the folder or exports should be visible to the outside of this folder. It makes more sense when you have many files in one folder (e.g. a component with many subcomponents) but only the main component is supposed to be used in the application. I don't have a great example in this app but the issue list component is the best I could find: github.com/profydev/prolog-app/tree/main/features/issues/components/IssueList So basically instead of writing ``` import { IssueList } from "features/issues/components/issue-list/issue-list" ``` you can write ``` import { IssueList } from "features/issues/components/issue-list" ``` Or even simpler because the feature exports the component ``` import { IssueList } from "features/issues" ``` I hope that makes sense :) In the Bulletproof React project there is also a longer explanation: github.com/alan2207/bulletproof-react/blob/2facb64e827836fcd3ead4c1f7603760b7456619/docs/project-structure.md

[@ssj1260]

@@profydev Greatly appreciated, thank you so much, looking forward to the React Job Simulator

[@przemekgaezki1606]

can i use these in react native also?

[@andresteward8226]

how familiar do we need to be with typescript?

[@profydev]

The idea is that you can learn it while working on the project. There are lots of examples in the codebase that you can reference. So from my perspective there's no need for experience with TS

[@akaRong]

Hi, that's pretty awesome. I have one question for application NextJS + DRF how should I deploy to production. Should I deploy backend and frontend (vercel) separately or should I docker them and Nginx as a web server? Could you share some idea? Much Appreciate.

[@profydev]

I guess it depends :) Vercel gives you a lot of things out of the box. Like preview deployments from your PRs, CDN, and probably a lot more. So it's definitely a good idea if you use vercel for your frontend. From what I heard their pricing can explode though if you make heavy use of API routes. An advantage of deploying them together is that latency is low. Docker can become complex though so it might take you some time if you're new to it. You can also check out railway.app

[@akaRong]

@@profydev Thank you so much for your idea.

[@gp5109]

Hi, I'm a beginner in React. What makes this project advanced?

[@profydev]

The codebase isn't very big yet but the tooling (incl CI setup) and folder structure are state of the art imo. In beginner projects you typically don't find all this stuff that I'm talking about in the video. Not sure if that answers your question :)