Dissertation project - researching and building a portfolio builder project with typescript and react
- This document's purpose is to guide how to install and run the project locally.
- ReactJS
- Typescript
- NodeJS
- ExpressJS
- Jest
- React Testing Library
- Storybook
- MongoDB
- Axios
- Cors
- Mongoose
- Emotion Styling
- Make sure you have installed NodeJS ( version 14.0 or higher )
- Make sure you have installed MongoDB ( locally or remote )
- Make sure you have installed Git
To ensure the project runs smoothly and no errors are encounter follow the next steps.
- Clone the repository
git clone https://github.com/your-username/PortfolioBuilder.git
- Navigate to the project directory
cd portfolio-generator
- Install all the dependencies
npm install
- Make sure all the dependencies are up to date
npm update
- To run the server use
npm run start:server
- To run the frontend use
npm run start:client
- The project will open on your localhost:3000 and the server will open on localhost:3001
The application has unit tests written with Jest. If you wish to run the tests simply run npm test
from the root directory of the project
Storybook is used for building UI components and pages in isolation. This project includes stories for the Button component and TextArea component.
- To run Storybook use
npm run storybook
- Open http://localhost:6006 to view it in the browser
### System Design
The PortfolioBuilder project follows a typical MERN (MongoDB, Express, React, Node.js) architecture:
- Frontend: Built with React and TypeScript, styled with Emotion, and bundled using Webpack.
- Backend: Implemented with Node.js and Express.js, using Mongoose for MongoDB interactions.
- Database: MongoDB is used for data storage.
- User Actions: Users interact with the frontend React components.
- API Calls: The frontend makes HTTP requests to the backend API using Axios.
- Backend Processing: The backend processes the requests, interacts with MongoDB to perform CRUD operations, and sends - responses back to the frontend.
- State Management: The frontend updates its state based on the responses from the backend.
- User Registration: POST /register
- User Login: POST /login
- Fetch User Data: GET /user/:id
- Fetch User Skills: GET /user/:id/skills
- Add Project: POST /projects
- Edit Project: PUT /projects/:userId/:projectId
- Delete Project: DELETE /users/:userId/projects/:projectId
- Add Skills: POST /user/:id/skills
- Fetch Projects: GET /projects/:userId
To set up different environments (development and production):
-
Configure your .env file for local development.
-
Use local MongoDB or a development MongoDB Atlas cluster. Production:
-
Configure your environment variables on Heroku and Netlify.
-
Use MongoDB Atlas for a production database.
- The app can be accessed here : PortfolioBuilder
-
Frontend (Netlify): Connect your GitHub repository to Netlify. Set up continuous deployment for the main branch. Ensure environment variables are configured in Netlify settings.
-
Backend (Heroku):
Deploy your backend using Git. Set up environment variables in Heroku. Scale your dynos as needed.
- Netlify: Automatically builds and deploys the frontend when changes are pushed to GitHub.
- Heroku: Automatically deploys the backend when changes are pushed to the connected GitHub repository or manually via the Heroku CLI.
Contributions will be welcomed once the open source license is set and everything is ready. Here’s how you can prepare to contribute in the future:
- Fork the repository.
- Create a new branch for your feature or bugfix
git checkout -b my-feature-branch
- Make your changes
- Commit your changes
git commit -m "Description of my changes"
- Push to your branch
git push origin my-feature-branch
- Open a pull request on Github
Further details of the description messages for the PR will be released when the project is open sourced and ready for contribution.
This project is set to be open source in future development steps. Here are some of the features and improvements that are planned for implementation:
- Enhanced Component Library: Expansion of the component library with more reusable components
- Advanced Customization: More options for customizing portfolios
- Performance Optimization: Improvements in performance and scalability.
- Documentation: Comprehensive documentation for developers and end-users.
Due to time constraints allocated for my dissertation, these features are not possible to be completed before the deadline. However, once the open source license is established, we welcome contributions and look forward to collaborative development to make this project robust and widely useful.