This project is a space for developers looking to level up their skills and create meaningful projects that benefit both themselves and maybe even some users. You can bring your favorite project to life within this Monorepo, using any JS framework you love (all supported by NX). Simplest examples you can build your favorite apps' clone and try to deploy it to Vercel, feel free to build if you have any uniqe ideas.
You'll get to experience a real-world process and workflow, working with a big codebase, gaining valuable insights and making a good project showcase for your portfolio 🚀. Members of the repo can / recommended to review each others code to help and share knowledge as well as keep the code base clean.
- 📓 Full Stack Note Taking App This project aims to provide a simplified version of popular note-taking applications like Notion and Craft.
- Implement Angular Frontend app for Rogo-Notes app, the Backend is alredy built with Nestjs.
- Implement MD based Document that could be saved on user machine or a linked remote space like (Google Drive, Dropbox etc.)
- Having media (Audio, Vidoe, Photo) attachments to each Document
run npm install to install all the dependencies.
Tech stack: NX, Nesjs, Typeorm, Postgres, Angular, React, Docker, Docker-compose and more.
Run docker-compose up for a dev server, it will run up the Posgress DB.
- Navigate to http://localhost:3333/api to see the Nestjs API.
- Navigate to http://localhost:3000 Auth app in React.
- Navigate to http://localhost:4200/ to see the Angular app the actuall app.
###Project structure:
└── root
├── apps
│ ├── api <-- nest/node/denojs
│ └── client <-- angular/react
└── libs (1)
├── api <-- grouping folder (dir)
│ ├── core <-- grouping folder (dir)
│ │ └── feature <-- nest/node/deno:lib (2)
│ ├── feature-1 <-- grouping folder (dir)
│ │ ├── data-access <-- nest/node/deno:lib, service + entities
│ │ ├── feature <-- nest/node/deno:lib, module + controller
│ │ └── utils <-- nest/node/deno:lib, things like interceptors, guards, pipes etc...
│ └── feature-2 <-- grouping folder (dir)
│ ├── data-access <-- nest/node/deno:lib, service + entities
│ ├── feature <-- nest/node/deno:lib, module + controller
│ └── utils <-- nest/node/deno:lib, things like interceptors, guards, pipes etc...
├── client <-- grouping folder (dir)
│ ├── shell <-- grouping folder (dir)
│ │ └── feature <-- angular/react:lib (3)
│ ├── feature-1 <-- grouping folder (dir)
│ │ ├── data-access <-- angular/react:lib, service, API calls, state management)
│ │ ├── feature <-- grouping folder (dir) or lib (4)
│ │ │ ├── list <-- angular/react:lib e.g. ProductList
│ │ │ └── detail <-- angular/react:lib e.g. ProductDetail
│ │ └── ui <-- grouping folder (dir)
│ │ ├── comp-1 <-- angular/react:lib, SCAM for Component
│ │ └── pipe-1 <-- angular/react:lib, SCAM for Pipe
│ └── shared <-- grouping folder (dir)
│ ├── data-access <-- angular/react:lib, any Service or State management to share across the Client app)
│ ├── ui <-- grouping folder (dir) (5)
│ └── utils <-- angular/react:lib, usually shared Guards, Interceptors, Validators...)
└── shared <-- grouping folder (dir), most libs in here are buildable @nrwl/angular:lib)
├── data-access <-- my shared data-access is usually models, so it is a lib
├── ui <-- optional grouping folder (dir), if I have multiple client apps
└── utils <-- optional grouping folder (dir), usually validation logic or shared utilities
├── util1 <-- lib
└── util2 <-- lib
Run nx graph to see a diagram of the dependencies of the projects.
Visit the Nx Documentation to learn more.