Giter VIP home page Giter VIP logo

mobieffectsdemo's Introduction

MobiEffects WebApp Demo

This is a repository for a small app demo to prove my skills at web development

Database

This project is using Mongo DB in a docker container.

Load database

  1. Install docker & docker-compose https://docs.docker.com/compose/install/

  2. Up container with docker-compose

docker-compose up -d

The docker-compose.yml file contains some environment variables to initialize the database with authentication.

There is a file called mongo-init.js that is copied into the container that creates a not admin user. This new user can only read and write into database.

Backend

Nest JS is a progressive Node.js framework for building efficient, reliable and scalable server-side applications. https://nestjs.com/.

Nest JS can help US to build amazing server applications with concepts of OOP. I can say that this framework is like working with Angular 2+ in backend side.

Instal Node JS v.12.14.1

https://nodejs.org/es/

You can also build a docker container with this Node JS version already installed

Install dependencies

Every dependecy this project user can be located in package.json and can be installed with the following command:

cd backend
npm install

Create environment variables file

Copy all variables from .env.example file and then create a new file called .env

touch .env

This file will contain the values for each variable acording to your own environment

Your .env file should have exactly the following content to work in your localhost for this demo.

DB_HOST=localhost
DB_NAME=dbdemo
DB_PORT=27017
DB_USERNAME=demoUser
DB_PASSWORD=d3m0p4ssw0rd

Run backend

cd backend
npm start

Run backend in development mode (Watch files changes)

npm run start:dev

Show Swagger Api

This project is configured to generate documentation with Swagger where you can see all the relevant information of each API endpoint. Just open your browser and go to the next URL (Assuming the server is already running).

http://localhost:3000/api

Frontend

Frontend is built with React.js and it uses the following dependecies too:

  1. react-bootstrap
  2. react-router-dom
  3. axios

Install dependencies

Same as the backend dependencies

cd frontend
npm install

Create environment variables file

Create a file called .env.local

touch .env.local

Your .env.local file should have exactly the following content to work in your localhost for this demo.

PORT=4200
SASS_PATH:src

Run project

cd frontend
npm start

Your browser will be opened at http://localhost:4200

mobieffectsdemo's People

Contributors

alexvanhell avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.