Imaggy

Social web app focused on images.
Live Project · Page about project

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contact
5. Testing

About The Project

Full-stack social web application focused on images, created using the MERN stack with MaterialUI and ReactQuery for state management. The app allows users to create an account, upload, share and comment on images. Users can also follow each others, like images and comments.

It provides a platform for users to connect and engage with others who share similar interests in photography, art, and design. With the search function, users can search for images based on tags.

The pro version provides additional features for users to upload GIFs and have priority in search results. Users can create more dynamic and engaging posts with the use of GIFs, which can help to grab the attention of other users. Pro allows to set a banner image that appears on their profile page, creating a more personalized and professional look for their profile. Users can also upload an avatar image in the form of GIFs.

(back to top)

Built With

Front-end:

• React.js
• TypeScript
• MaterialUI
• React Query
• Framer Motion
• React Hook Form
• Yup

Back-end:

• Node.js
• MongoDB
• Express.js
• Joi

(back to top)

Getting Started

Prerequisites

To properly run this application, you'll need Node.js and npm installed on your machine. Additionally, you'll need Docker Desktop to run databases in a containerized environment.

Installation

You need to clone the repository, install npm packages and create all essential files. Everything is listed below.

1. Clone the repository.

   git clone https://github.com/LeCarteloo/Imaggy.git

2. Create .env file in server/config directiory, it will be used in docker-compose.yaml and docker.sh.

   # Project name
   COMPOSE_PROJECT_NAME=imaggy
   
   # Mongo db env variables
   USERNAME=<username>
   PASSWORD=<password>
   DATABASE=imaggy
   
   # Mongo test db env variables
   TEST_USERNAME=<test_username>
   TEST_PASSWORD=<test_password>
   TEST_DATABASE=imaggy-test

3. Create mongo-init.js file inside server/config directory.

   db.createUser({
   	user: '<username>',
   	pwd: '<password>',
   	roles: [
   		{
   			role: 'readWrite',
   			db: 'imaggy',
   		},
   	],
   });

4. Create mongo-test-init.js file inside server/config directory.

   db.createUser({
   	user: '<test_username>',
   	pwd: '<test_password>',
   	roles: [
   		{
   			role: 'dbOwner',
   			db: 'imaggy-test',
   		},
   	],
   });

5. Open Docker Desktop and run docker.sh script located in server/config, it will create new container with two images of MongoDB. One for test and one for development.

6. Head to server directory and install all needed dependencies.

   npm install

7. Create .env file in server directory.

   # Server and node config
   NODE_ENV=development
   PORT=<port | 3000>
   
   # Mongo database config
   MONGO_URI=localhost:27017
   MONGO_USER=<username>
   MONGO_PASS=<password>
   MONGO_DB=imaggy
   
   # JWT secret key and expiration time
   JWT_SECRET=<secret_key>
   JWT_LIFE=<lifetime | 12h>
   
   # JWT refresh secret key and expiration time
   JWT_REF_SECRET=<refresh_secret_key>
   JWT_REF_LIFE=<refresh_lifetime | 30d>

8. Create .env-test file in server directory.

   # Server and node config
   NODE_ENV=testing
   PORT=<port | 5000>
   
   # Mongo database config
   MONGO_URI=localhost:27018
   MONGO_USER=<test_username>
   MONGO_PASS=<test_password>
   MONGO_DB=imaggy-test
   
   # JWT secret key and expiration time
   JWT_SECRET=<test_secret_key>
   JWT_LIFE=<test_lifetime | 6h>
   
   # JWT refresh secret key and expiration time
   JWT_REF_SECRET=<test_refresh_secret_key>
   JWT_REF_LIFE=<test_refresh_lifetime | 12h>

9. Head to client directory and install all needed dependencies.

   npm install

10. *If you changed default port of server, go to client/api directory and change BASE_URL to inside axios.ts file.

    const BASE_URL = 'http://localhost:<port | 3000>/api';

    (back to top)

Usage

To use this application, databases (images in Docker), client and server must be running together.

1. To run client in development mode

    npm run dev

2. To build and run client

    npm run build
    npm run preview

3. To run server (it will be autmatically built)

    npm run dev

4. Or run it from build by running

    npm run build
    npm start

Make sure your Docker is running.

(back to top)

Testing

1. To run unit tests in both server and client environments

     npm test

Contact

• LinkedIn - @filip-papiernik
• Email - [email protected]

(back to top)