A mobile-first, full-stack, web application for lovers of metal music that aims to link them with other fans of the genre
Jack Chou, Andrew Song, and Keith Tachibana
| Dependency | Version |
|---|---|
| @Babel/Core | 7.8.0 |
| @Babel/Plugin-Transform-React-JSX | 7.8.0 |
| Axios | 0.19.2 |
| Babel-Loader | 8.0.6 |
| Bcrypt | 4.0.1 |
| Bootstrap | 4.4.1 |
| CORS | 2.8.5 |
| Disconnect | 1.2.1 |
| Dotenv | 8.2.0 |
| Express | 4.17.1 |
| Express-Session | 1.17.0 |
| FontAwesome | 5.11.2 |
| Lodash | 4.17.15 |
| Moment | 2.24.0 |
| Multer | 1.4.2 |
| Node-Fetch | 2.6.0 |
| Node-Mailer | 0.1.1 |
| PG | 7.17.1 |
| PM2 | 4.2.3 |
| PostgreSQL | 10.10 |
| React | 16.12.0 |
| React-DOM | 16.12.0 |
| React-Router-DOM | 5.1.2 |
| Session-File-Store | 1.3.1 |
| Socket.io | 2.3.0 |
| Webpack | 4.41.5 |
| Webpack-CLI | 3.3.10 |
| YouTube-API-Search | 0.0.5 |
Try the application live on my portfolio website
- * Users can register for an account by setting up a password which gets hashed and saved in the database
- * Users can authenticate themselves at the login page using said password
- * Users can reset their password and be sent an e-mail containing a password reset link that expires in 1 hour using a token
- * Users can post comments, album reviews, or other information for others to see when they log into the application, sorted by date from most recent to oldest
- * Users can add a profile to their account, including a profile picture, screen name, e-mail address, real name, location, phone number, and favorite sub-genres of metal
- * Users can view their individual post history (if any) and edit or delete them
- * Users can search for concerts via the TicketMaster API and see the results in tabular format
- * Users can also view the concert search results on Google Maps as clickable, animated markers with the corresponding concert information
- * Users can join a global chat session with other currently logged-in users and message each other in real-time
- * Users can log out and rejoin the chat room and still see all previous chat messages
- * Users can search for band profiles using the Discogs API
- * Users can search for YouTube videos and play them inside the application
- * DB Designer available here
- * Figma available here
- * MeisterTask available here
- * Wireframe available here
| Requirement | Version |
|---|---|
| Nginx | 1.10 or higher |
| Node | 10 or higher |
| NPM | 6 or higher |
| PM2 | 4 or higher |
| PostgreSQL | 10 or higher |
| Ubuntu Server | 18.04 LTS |
- Clone the repository
git clone https://github.com/Keith-Tachibana/Metalink.git- Change directory to cloned folder
cd Metalink/- Install all dependencies with NPM
npm install- Start PostgreSQL server
sudo service postgresql start- Create the database
createdb metalink- Import the schema and dummy data
npm run db:import- Edit your nginx default site configuration to reverse proxy the Express.js server
cd /etc/nginx/sites-available
sudo nano default- 7a. In the "server" code block, add this underneath the first location definition:
location /api {
proxy_pass http://127.0.0.1:3001;
}
location /socket.io {
proxy_pass http://127.0.0.1:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}- 7b. Save your changes (
Ctrl + O) and exit (Ctrl + X) - 7c. Link your default site to the sites-enabled directory (if not already done):
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default- Start nginx
sudo service nginx start- Make a copy of the .env.example file, update it with your PostgreSQL credentials, and add your API keys to it
cp .env.example .env- 9a. You'll need API keys for the following: Discogs, TicketMaster, and YouTube
- Transpile React components using Webpack
npm run build- Start the Express.js server using the PM2 module
sudo pm2 --name "Metalink" start "npm run start"- Open your default web browser and navigate to http://localhost:3000/ to see the result!