Brainfolio is a digital portfolio web app developed with NestJS and ReactJS
Profile Visibility(Should not show private profile)
Backend - https://testdockerprod123.herokuapp.com/swagger/
Frontend - https://brainfolio.herokuapp.com/
Backend - https://github.com/warmnuances/Brainfolio-api
Frontend - https://github.com/wintan123/Brainfolio
NestJS - Intially, we picked .NetCore to have a taste of enterprise development. However, the lack of libraries in the .NetCore forced us to seek another solution. NestJS turns out to be that perfect solution as it support Dependency Injection used in enterprise solutions such as Spring Boot and .Net. We applied service repostiory pattern design in our code.
ReactJS - We knew we wanted a Single Page Application for a more native web experience. Adopting React has also allowed for a more components-based mindset which greatly contributed to seperations of concerns. It increase the interactivity of the application and helps greatly with state management
MongoDB - Using NoSQL such as MongoDB takes away the need to design database as it provides flexibility. Using MongoDB helps us focus more on developing features instead of designing database. The nature of our data also greatly align with the structure of NoSQL as most of our data by nature is of One-to-One relationship.
Firebase - Firebase provide a great and ease of use OAuth Server. With firebase, we delegate the responsibility of storing password and sensitive information with firebase. Firebase Storage also provides a way for the application to store files.
CircleCI - Used for creating a custom CICD pipelines and helpes with automatic docker deployment Heroku - Deploying on Heroku is easy and Heroku allows docker container hosting which makes heroku a great choice Github - Github is used as a version control Docker - Initially used to reduce build size when compiling bcrypt binaries. Overall, it helps to ensure necessary files are in production and nothing more.
- Git push triggers a job in CircleCI that install dependencies and run e2e tests.
- If e2e tests succeeds, it merged with the production branch
- In the production branch, multi stage docker build is executed which create a minimal and sufficient build for production
- Once the docker image is build, it is pushed to Heroku Container registry and released into the heroku dyno which our apps lives in.
Steps to recreate production such as: (cd, npm install, npm start, runs on localhost3000 (frontend) localhost5000 backend) Front-end - Create a performant
This can be found in our docs file.
The files include:
- Backend File Layers
- Front end File Layers
- Architecture diagram
- User Stories and personas
- Whodobefeel and motivational model
- UML Diagram
- System Architecture
- Change Log: Sprint Retrospective
Adopting TypeScript for the backend - Catching compile time errors helped in saving time during deployment and improved the overall developer experience
Code-splitting - Lazy loading components improved the overall performance of the app. We did a lighthouse test and saw an improvement of 16 for performance score to the 80 range.
- Unnecassary Rerenders - This project uses React Context for global state management and the lack of state slicing (See reselect) really causes unneccessary rerenders. We should have adopted redux from the start.
- Folder structure and code design - As we code more and more , we discovered more effecient ways of reusing code logic and structuring code.
Commit id: 42e6095ef00ae88fe443219972420812be01fef8
Please give it some time when openning the app, the server is located in united states and heroku have a cold open system when you open the app for the first time.