Slack COMP307
Note: This README was adapted from https://github.com/ToxyhDev/vitejs-stack-mern-quickstart
Table of Contents
Prerequisites
Here's the list of utilities you need to install for the project:
- Tested OS's: MacOS, Linux. The project should work on WSL2 and Windows directly as well, let me know if it doesn't.
- Node.js (16+, preferably 20). I suggest using NVM (https://github.com/nvm-sh/nvm) or another version manager, but it's not necessary.
- Yarn (1.22+) or Bun (latest) installed globally.
- Docker (20.10+, ideally latest).
🛠️ Installation
-
Go to the root directory of the project:
cd slack-comp307
-
Install global dependencies of the project:
# With NPM: npm install # With Yarn: yarn # With Bun (yarn compat mode): bun install --yarn
-
-
Go to the client directory:
cd client
-
Install client-side dependencies:
# With NPM: npm install # With Yarn: yarn # With Bun (yarn compat mode): bun install --yarn
-
-
Go to the server directory:
cd ../server
-
Install server-side dependencies:
# With NPM: npm install # With Yarn: yarn # With Bun (yarn compat mode): bun install --yarn
-
💻 Usage
Launch MongoDB in Docker
- Go to the root of the project.
- Run the command:
docker compose up -d db
Start the development server
- At the root of the project, run the command:
# With NPM:
npm run dev
# With Yarn:
yarn run dev
# With Bun:
bun run dev
Warning
If you only want to use the client part:
# With NPM: npm run client # With Yarn: yarn run client # With Bun: bun run client
Same for the server:
# With NPM: npm run server # With Yarn: yarn run server # With Bun: bun run server
🔩 List of Dependencies
Development Dependencies
-
vite: Fast development tool for modern web applications. Provides high development performance with its fast compilation and on-demand module loading.
-
typescript: Superset of JavaScript with static typing features. Allows detecting potential errors early in the development phase.
-
eslint, eslint-plugin-react-hooks, and eslint-plugin-react-refresh: ESLint and associated plugins for detecting errors in React code, with additional rules for React hooks and hot reloading.
Frontend Dependencies
-
react and react-dom: Core libraries for building responsive user interfaces. React is a JavaScript framework for creating reusable components, and React DOM facilitates rendering React components in the browser.
-
react-router-dom: Library for managing routes in a React application. Allows creating multi-page applications and navigating between different views.
Backend Dependencies
-
cors: Enables resource sharing between origins. Facilitates communication between frontend and backend by accepting cross-origin requests.
-
dotenv: Loads environment variables from a .env file into the
process.env
. Allows separating configuration files from code and securely storing sensitive information. -
express: Web framework for Node.js. Facilitates handling routes, HTTP requests, and middlewares.
-
mongodb: MongoDB database driver for connecting to the MongoDB database and working with data.
Note
You can find more information about these dependencies in the project's documentation or their respective websites.
🔑 License
MIT.
💡 Authors
- Constantin Buruiana (constantin.buruiana@mail.mcgill.ca)
- David Castelli (david.castelli@mail.mcgill.ca)
- Jackson Evans (jackson.evans@mail.mcgill.ca)
- Felis Sedanoluo (felis.sedanoluo@mail.mcgill.ca)