❗Work In Progress❗

GamesLock

About the project

GamesLock is a social media where everything you post will be there for eternity as once something is posted, you cannot edit it or delete it.

The backend was done in Node.js and the frontend with React.js

Table of contents

• GamesLock
  • About the project
  • Table of contents
  • TODO
  • Installation
    • Clone the repo
      • Backend
      • Frontend
    • Using the install script
  • Usage
    • Example
  • Development usage
    • Backend
    • Frontend
      • USAGE
        • Example

TODO

Things done and not yet done:

• Backend
  • User
    • Register/login/logout
    • Delete account
    • Getting a specific user profile
    • Level system
    • Notifications
    • Follow system
    • Getting an achievement
    • Connection log system
  • Messages
    • Adding message
    • Getting a specific message
    • Deleting message (admin only)
    • Like system
    • Report system
  • Comments
    • Adding a comment to a post
    • Getting a specific comment
    • Deleting comment (admin only)
    • Like system
  • Achievements
    • Adding achievements (admin only)
    • Editing an achievement (admin only)
  • Other
    • Optimisation
• Frontend
  • User
    • Profile page
    • Achievements page
    • Login/register page
    • Edit profile page
  • Home
    • Home page
  • Search
    • Search page
  • Notifications
    • Notifications page
  • Posts
    • Post page
    • Adding comments

Installation

Clone the repo

clone the repo.

git clone https://github.com/NamelessProj/GamesLock.git
cd GamesLock

Backend

Then go to the backend folder and install the dependencies.

cd backend
npm install
npm run dev

Frontend

For the frontend, you'll need to go the frontend folder and install the dependencies.

cd frontend
npm install
npm run dev

Using the install script

You can also use the install script to install the project and directly set up the .env file for both the backend and the frontend.

you'll need to download the install.sh script and place it into the parent folder you'd like the project to be in before running the script.

Usage

To use the project, you'll need some environment variables. You can create a .env file in the backend folder and add the following variables:

PORT
NODE_ENV
DATABASE_URI
JWT_SECRET
MAILER_HOST
MAILER_PORT
MAILER_SECURE
MAILER_PASS
MAILER_USER
MAILER_DEV_EMAIL
ADMIN_EMAIL

The PORT is the port where the server will run.

The NODE_ENV is the environment where the server will run. It can be dev for development or prod for production.

The DATABASE_URI is the URI for the MongoDB database.

The JWT_SECRET is the secret for the JWT token. You can put anything you want, like mysecret.

The MAILER_HOST is the host for the mailer. You can use smtp.gmail.com for Gmail.

The MAILER_PORT is the port for the mailer. You can use 465 or 587.

The MAILER_SECURE is a boolean for the mailer. You can use true or false.

The MAILER_PASS is the password for the mailer.

The MAILER_USER is the email for the mailer, For Gmail, it's your gmail account.

The MAILER_DEV_EMAIL is the email where the mailer will send the emails in development, so you should put your personal email there to receive all the emails.

The ADMIN_EMAIL is the email for the admin. You can put your email there. It's used when something is reported.

Example

PORT=3000
NODE_ENV=dev
DATABASE_URI=mongodb://localhost:27017/gameslock
JWT_SECRET=mysecret
MAILER_HOST=smtp.gmail.com
MAILER_PORT=465
MAILER_SECURE=true
MAILER_PASS=abcdefghijklmnop
MAILER_USER=user@gmail.com
MAILER_DEV_EMAIL=personal@hotmail.com
ADMIN_EMAIL=my.admin.contact@gmail.com

Tip

Using Gmail

If you're using Gmail, you'll need to allow less secure apps to access your account. You'll have to use the 2-step verification and create an app password. You can do that here.

You can also use the OAuth2 method, but it's a bit more complicated.

Development usage

Backend

Navigate to the backend folder and run the server.js

cd backend
npm run start

Frontend

Navigate to the frontend folder and start the React app.

cd frontend
npm run start

USAGE

To use the project, you'll need some environment variables. You can create a .env file in the frontend folder and add the following variables:

VITE_API_URL
VITE_IMG_URL
VITE_BASE_URL

The VITE_API_URL is the URL for the backend API.

The VITE_IMG_URL is the URL for the images. Since the images are stored in the backend, you'll need to put the URL for the images.

Example

VITE_API_URL=http://localhost:3000/api/
VITE_IMG_URL=http://localhost:3000/images/
VITE_BASE_URL=http://localhost:5173/