JOYN (Just Organize Your Needs)

Welcome to the JOYN MERN Stack Application! This project is a full-stack web application built using MongoDB, Express.js, React.js, and Node.js (MERN stack). Docker and Docker Compose are used to containerize the application for easy setup and deployment.

Table of Contents

• Features
• Prerequisites
• Getting Started
  • Clone the Repository
  • Environment Variables
  • Building and Running with Docker Compose
• Application Structure
• Usage
• Troubleshooting
• Contributing
• Staying Up-To-Date with Main Branch
• License

Features

• Frontend: Built with React.js and Vite for a fast development experience.
• Backend: Node.js with Express.js to handle API requests.
• Database: Utilizes MongoDB Atlas as a cloud database service.
• Dockerized: Easy setup and deployment using Docker and Docker Compose.

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Git: Download and install Git

• Docker: Download and install Docker Desktop

• Docker Compose: Comes packaged with Docker Desktop in the latest versions.

Getting Started

Clone the Repository

git clone https://github.com/JOYN-US/JOYN-Web.git
cd JOYN-Web

Environment Variables

Create a .env file in the root directory of the project to store your environment variables. You'll need to provide the MongoDB connection URI and any other necessary variables.

# .env file

# Replace with your actual MongoDB Atlas connection string
URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority

# Optionally, define any other environment variables you need

Note: Do not commit your .env file to version control. It's included in .gitignore for security.

Building and Running with Docker Compose

The application is containerized using Docker, making it easy to set up and run without installing Node.js or any dependencies on your local machine.

1. Build the Containers

   This is required if docker files change or if dependencies change.

   From the root directory, run:

   docker compose build --no-cache

   This command will build the Docker images for both the frontend and backend services

2. Run the Containers

   From the root directory, run:

   docker compose up -d

   This command will run the Docker images for both the frontend and backend services.

   After the containers are running, changes to your local project should hot reload upon save.

3. Access the Application

   • Frontend: Open your browser and navigate to http://localhost:5173
   • Backend API: Accessible at http://localhost:5050

Application Structure

(root)
JOYN-Web/
├── joyn/
│   ├── backend/
│   │   ├── Dockerfile
│   │   ├── package.json
│   │   ├── server.js
│   │   └── ...other backend files
│   └── frontend/
│       ├── Dockerfile
│       ├── package.json
│       ├── vite.config.js
│       └── ...other frontend files
├── .env (you will add this yourself)
├── .gitignore
├── docker-compose.yml
└── README.md

Usage

• Development: The application supports hot reloading. Any changes you make to the source code will automatically refresh the respective service if the containers are running.

• Rebuilding Containers: If you make changes to Dockerfile/docker-compose.yaml files or dependencies, a rebuild of the container images is required:

  These commands will take longer to finish running because they are rebuilding images not using cached images from previous versions

  docker compose build --no-cache
  docker compose up -d

• Stop and remove all containers, networks, and volumes created by docker-compose up: In the root of your project directory run:

  docker compose down

• Taking Breaks: If you are taking a break from development, just run:

  docker compose stop

  You do not need to rebuild the image unless you make changes to the Dockerfile or dependencies.

  After break and returning to development, run the command:

  docker compose start

Troubleshooting

• Node Modules Not Found

  If you encounter errors related to node_modules not being found, ensure that the anonymous volume for node_modules is correctly set up in the docker-compose.yml file:

  volumes:
    - ./joyn/frontend:/app
    - /app/node_modules

  This configuration ensures that the container's node_modules are preserved and not overwritten by your local files.

• Environment Variables Not Set

  Make sure your .env file is correctly configured and that all required environment variables are provided.

• Port Conflicts

  If the ports 5173 or 5050 are already in use on your machine, you can change them in the docker-compose.yml file (let team members know, or just don't push changes to this file to your branch, keep them local):

  ports:
    - 'your_desired_port:container_port'

  Real example:

  ports:
    - '5173:5173'

• Docker Permissions

  If you run into permission issues with Docker commands, you might need to run them with sudo (on Unix systems).

Contributing

Please follow these steps:

1. After Cloning Project

   cd to the location you cloned the project.

   cd joyn

2. If Continuing Work After a Long Period of Already Cloning Project

   make sure that you have the most up to date version of the application code.

   git pull origin main

3. Create a Feature Branch

   git checkout -b my-feature-branch-name

4. Check Modified Files (Optional)

   This will show what files have been modified and are able to be staged.

   git status

5. Add Files to Staging Area

   git add {filename}

   Adding a file to staging area will look something like this:

   git add joyn/frontend/src/pages/WelcomeMessage.jsx

   If you want to add all of the modified files to staging area use:

   git add .

6. Make Changes and Commit

   git commit -m 'Add some feature'

   Make commit messages in present tense, one sentence, and describe what you added, updated, or removed.

   Examples of good commit messages:

   git commit -m 'Add login page authentication'

   git commit -m 'Remove unnecessary function for displaying dropdown'

   git commit -m 'Update user profile page avatar image'

7. Push to the Branch

   git push origin my-feature-branch-name

8. Create a Pull Request

   Open a pull request to the main repository with a description of your changes.

Before Contributing Each Day

Please follow these steps:

1. Making Sure Your Feature Branch Stays Up-To Date With Main

   cd to the location you cloned the project and make sure you are on the main branch:

   git checkout main

2. Pull the latest from the remote main branch:

   git pull origin main

3. Checkout your feature branch:

   git checkout my-feature-branch

4. Update your feature branch in the repo:

   git push origin my-feature-branch

5. Rebase on the main branch:

   git rebase main

6. Force update your remote feature branch:

   git push origin my-feature-branch --force

License

This project is licensed under the MIT License - see the LICENSE file for details.