Project for COMP30022 IT Project 2020 Semester 2 (Umair's Team 1)
Our clients are 4 masters students from the Software Processes and Management (SWEN90016) subject.
As university students, they wanted a place to present their work, careers and skills; and give them one place they can direct professionals, colleagues, friends and recruiters to learn about them and their work. Importantly, they wanted their portfolios to represent their own individuality, to enable them to stand out from the crowd; and hence be personalisable.
This gave us the following requirements:
- An easy-to-use portfolio creation experience
- Portfolios are easy to customize for individual expression
- Portfolios viewable from browsers and mobile
- Have ways to contact and discover users
- And supporting a variety of media.
| Name | Student No | GitHub | |
|---|---|---|---|
| Tuan Dung (Josh) Nguyen | 941806 | tuann6@student.unimelb.edu.au | joshnguyen99 |
| Lawrence Leong | 996300 | lsleong@student.unimelb.edu.au | Rexrover2 |
| Liam Saliba | 882039 | lsaliba@student.unimelb.edu.au | exradr |
| Chan Jie Ho | 961948 | chanjieh@student.unimelb.edu.au | hochanjie |
| Yung Cheng Kong | 1026205 | yungchengk@student.unimelb.edu.au | yungchengK |
Supervisor
Umair Mawani (umawani) / umair.mawani@unimelb.edu.au / umawani@student.unimelb.edu.au
- User management: confirmation, password reset
- Portfolio viewing
- Mobile and desktop viewing
- Rich portfolio elements
- Portfolio customisation with themes, and different layouts.
- With least 4 types of pre-made portfolio templates
- So that the user's don't have to worry about coming up with their own themes
- File upload & Media management
- Contact form
- Live editing, with autosave.
- Email bot
- Google/Facebook login (backend)
- Cookies
- Single-/Multi-page portfolios
- 10-page limit
- Page naming constraints
- Page Completion status
- Media-preview
- Profile pictures
- Social icons
- Project Scope
- User Stories
- Motivational Model
- Architecture Diagram
- Database Schema Model
- User Flow Diagram
- API Documentation
- Chromatic/Storybook
Because this app is made of two npm projects, there are two places to run npm commands:
- Node API server in
server/ - React UI in
client/directory.
Test the app:
# in root directory
npm run dev
Test the built app:
# in root directory
npm build
npm start
# to test the whole app
npm test
In a terminal:
# Change directory first!
cd server
# Initial setup
npm install
# Start the server
npm start
# Test the server
npm testNote: server and client are separate. cd to the correct directory (/ or client/) before doing this.
cd
npm install package-name --saveIf the package you want to add is a development package, use the command
npm install package-name --save-devThe React app is configured to proxy backend requests to the local Node server. (See "proxy" config)
In a separate terminal from the API server, start the UI:
# Always change directory, first
cd client/
# Initial setup
npm install
# Start the client
npm start
# Test the client
npm test
# To run storybook
npm run storybookIt's the same as server, just cd client first.
Only needed if you're testing how Heroku will deploy the app.
Within project root /
# Run Heroku deployment from your own computer
heroku local web
At this point, http://localhost:5000 is running the server and api. You can check http://localhost:5000/api and you'll probably see a JSON file.
But will 404 since the site files are not compiled within the client/build/ directory. To get react running locally (as Heroku does it), we need to build it.
# Compile react for deployment (will build to `client/build/` and served with `server/` express)
# run this in project root
npm run build
The above script can be found in package.json.
Now http://localhost:5000 will have the app. Sweet.
There's little reason to do this since master will automatically be deployed to Heroku upon any update.
This is here for documentation purposes.
# Add heroku as remote (will exist as heroku branch)
heroku git:remote -a camelcase-itproject
# Push branch to heroku
git push heroku master