Giter Club home page Giter Club logo

pangolin's Introduction

MEANAuth - Login App

Table of Content

  1. Introduction
  2. Used versions
  3. Used tools
  4. Used packages
  5. How to run the API
    5.1. Build and run with Docker
    5.2. Build and run with SDK
    5.3. Test and stop
  6. Limitations
    6.1. Exception/error handling
  7. Some further development possibilities
  8. Resources

1. Introduction

This is a basic MEAN stack (MongoDB, Express.js, Angular, Node.js) single-page web application project written in TypeScript. It is a simple user login/account management app with JWT authentication. You can register a new user account with your email address, name and password. After successful registration, you can log in and view your user data. This app was created for learning purpose, but is might be useful as a starting-point for other projects. The API uses:

  • MongoDB (Mongoose) noSQL database
  • node.js (Express) RESTful API
  • Angular 9 (Typescript) SPA
  • Bootstrap 4 style
  • JWT for authentication

If any question, please do not hesitate to contact me.

2. Used versions

1. Frameworks

  • Express.js: 4.17.1
  • Angular: 9.1.4

2. Runtime:

  • node.js runtime: 12.16.3

3. Database:

  • MongoDB: 4.2.6

3. Used tools

  • Postman for API testing
  • Git Extensions as git gui
  • VSC as text editor
  • Docker for containerization
  • Windows 10 as OS

4. Used packages

1. Backend:

  • express: 4.17.1,
  • mongoose: 5.8.7,
  • bcryptjs: 2.4.3,
  • cors: 2.8.5,
  • jsonwebtoken: 8.5.1,
  • body-parser: 1.19.0,
  • passport: 0.4.1,
  • passport-jwt: 4.0.0

2. Frontend (except Angular packages):

  • @auth0/angular-jwt: 3.0.1,
  • angular2-flash-messages: 3.0.1,
  • bootstrap: 4.4.1,
  • jquery: 3.5.0,
  • popper.js: 1.16.1,
  • rxjs: 6.5.5,
  • tslib: 1.10.0,
  • zone.js: 0.10.2

5. How to run the API

5.1. Build and run with Docker

  • download and install Docker and Docker-Compose
  • clone or download the content of the repository
  • open a terminal and navigate to the containing folder
  • write "docker-compose up --build" and press Enter

5.2. Build and run with SDK

  • download and install node.js, MongoDB
  • clone or download the content of the repository

MongoDB

  • check if MongoDB server is running as a service

Backend

  • open a terminal and navigate to the folder "express-server"
  • write "npm install" and press Enter
  • after package installation is finished, write "npm start" in the terminal and press Enter

Frontend

  • open another terminal and navigate to the folder "angular-client"
  • write "npm install" and press Enter
  • after package installation is finished, write "npm start" in the terminal and press Enter

5.3. Test and stop

  • if no error message in the terminal, open your browser (recommended: latest Chrome, Firefox, Safari, Edge Chromium or Chromium) and open: http://localhost:4200
  • first register a user account, then log in and after that you can diplay your user data and also log out
  • after testing go back to the terminals and press "Ctrl+C" to stop the the backend and frontend as well

6. Limitations

6.1. Exception/error handling

This application needs to be extended with exception handling. There are some already known issues which may cause error when it is not used correctly. I only tested the app with correct input values.

7. Some further development possibilities

  • add possibility to modify and delete account
  • Facebook authentication
  • adding roles (admin, user)

8. Resources

There are several online source which I used to create this web app.
Including but not limited to:

Thank to every hero on Stackoverflow and Github who helped me with their comments! (Not all heroes wear capes.)

pangolin's People

Contributors

onk0611 avatar

Watchers

 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.