Getting Started Dev

Development Setup

1. Clone the repo git clone https://github.com/BuchholzTim/Whitebird.git.

MongoDB

1. Navigate to the docker folder in the project. There are two folders whitebird_dev and whitebird_prod. For development we only need the whitebird_dev. For development purposes we only need a running MongoDB.

2. In the whitebird_dev folder you can find a docker-compose.yml. You can customize the parameter in that file for your need or use the default values.

3. To start the application just use docker-compose up -d to run the MongoDB.

4. Our project structure is parted in two folders frontend and backend.

Frontend

1. Navigate to the frontend folder cd frontend.

2. Install the dependencies with yarn install.

3. Copy .env.bak to .env in the same folder and change its contents to match your configuration:

   # Backend Server Location
   API_URL='http://backend:3001/' <-- the ip and the port of api of our backend
   SOCKET_URL='http://backend:3002/' <-- the ip and the port of the socket in our backend
   
   # Frontend Host
   FRONTEND_HOST='http://localhost:40000' <-- the ip and the port needed for dynamic links

4. Run the frontend with yarn dev.

5. The frontend is now reachable under http://localhost:3000.

Backend

1. Install the dependencies with yarn install.

2. Run the backend with yarn start:dev.

3. Copy .env.bak to .env in the src/config-folder and change its contents to match your configuration:

   # ---------------------- MONGO DB ---------------------------
   mongo_uri=mongodb://root:asdasd@mongodb <-- the db connection string
   mongo_dbname=backend <-- the name of our mongodb
   
   
   # -------------------- APP SETTINGS -------------------------
   app_backend_port=3001 <-- the port of our backend
   app_joincode_length=8 <-- the length of our joincodes
   

4. The API-Swagger documentation is now reachable under http://localhost:3001

Used Technologies

Frontend:

Nuxtjs is a client-side JavaScript web framework for building single-page web applications following the MVVM (model-view viewmodel) pattern, but it can also be used in multipage web pages for single sections.

CSS

Bulma is a free, open source CSS framework based on Flexbox and used by more than 200,000 developers.

Canvas

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

Backend:

Nestjs is a framework for building efficient, scalable server-side Node.js application. The framework uses progressive JavaScript and is built with TypeScript. It also combines elements of OOP (Object Oriented Programming), FP (Functional Programming) and FRP (Functional Reactive Programming).

Sockets

Socket.IO enables real-time, bidirectional and event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.

Database

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

Used Development Tools

Package Manager:

• Yarn

VSCode Extensions for developing:

required:

• Prettier -> Code Formatting
• ESLint -> Code Linting
• Vetur -> Typescript Server for Vue

recommended:

• Env -> Highlighting .env-Files