Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/namelessproj/gameslock

A social media for gamers. Where all your posts are permanents.
https://github.com/namelessproj/gameslock

express expressjs mern-stack mongodb mongodb-database mongoose nodejs react reactjs vite vitejs zustand zustandjs

Last synced: 10 days ago
JSON representation

A social media for gamers. Where all your posts are permanents.

Awesome Lists containing this project

README

        

`❗Work In Progress❗`

![logo](./frontend/public/LOGO.svg)
# 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](#gameslock)
* [About the project](#about-the-project)
* [Table of contents](#table-of-contents)
* [TODO](#todo)
* [Installation](#installation)
* [Clone the repo](#clone-the-repo)
* [Backend](#backend)
* [Frontend](#frontend)
* [Using the install script](#using-the-install-script)
* [Usage](#usage)
* [Example](#example)
* [Development usage](#development-usage)
* [Backend](#backend-1)
* [Frontend](#frontend-1)
* [USAGE](#usage-1)
* [Example](#example-1)

## TODO
Things done and not yet done:
- Backend
- User
- [x] Register/login/logout
- [x] Delete account
- [x] Getting a specific user profile
- [x] Level system
- [x] Notifications
- [x] Follow system
- [x] Getting an achievement
- [x] Connection log system
- Messages
- [x] Adding message
- [x] Getting a specific message
- [x] Deleting message (admin only)
- [x] Like system
- [x] Report system
- Comments
- [x] Adding a comment to a post
- [x] Getting a specific comment
- [x] Deleting comment (admin only)
- [ ] Like system
- Achievements
- [x] Adding achievements (admin only)
- [x] Editing an achievement (admin only)
- Other
- [ ] Optimisation
- Frontend
- User
- [x] Profile page
- [x] Achievements page
- [x] Login/register page
- [x] Edit profile page
- Home
- [x] Home page
- Search
- [x] Search page
- Notifications
- [x] Notifications page
- Posts
- [x] Post page
- [x] Adding comments

## Installation
### Clone the repo
clone the repo.
```bash
git clone https://github.com/NamelessProj/GamesLock.git
cd GamesLock
```

#### Backend
Then go to the backend folder and install the dependencies.
```bash
cd backend
npm install
npm run dev
```

#### Frontend
For the frontend, you'll need to go the frontend folder and install the dependencies.
```bash
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](./install.sh) 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:
```env
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
```env
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
[email protected]
[email protected]
[email protected]
```

>[!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](https://myaccount.google.com/apppasswords).
>
> 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`
```bash
cd backend
npm run start
```

### Frontend
Navigate to the frontend folder and start the React app.
```bash
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:
```env
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
```env
VITE_API_URL=http://localhost:3000/api/
VITE_IMG_URL=http://localhost:3000/images/
VITE_BASE_URL=http://localhost:5173/
```