andrewjbateman / mean-stack-app

:clipboard: App using an Angular frontend to Create, Read, Update & Delete (CRUD) data from a Node.js backend server database.

⚡ Mean Full Stack App

• Mongo Express Angular Node (MEAN) full-stack app, integrates an Angular frontend with a Node.js backend.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Mean Full Stack App
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Frontend & Backend Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• includes signup and login forms
• user id and post details stored in MongoDB cloud Atlas database
• full Create Read Update and Delete (CRUD) database functionality
• uses the Angular canActive interface as a guard deciding if a route can be activated
• The error component is an Entry component but since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide.

📷 Screenshots

📶 Technologies

• MongoDB Cloud Atlas
• npm mongodb v3 official MongoDB driver for Node.js
• Express.js middleware v4
• Angular framework v12
• Angular Reactive Forms built around observable streams
• Node.js v14
• multer v1 node.js middleware for handling multipart/form-data to upload files

💾 Frontend & Backend Setup

• Install dependencies using npm i
• Backend: Add database access string to backend/app.js CONNECTION_URL then run nodemon server.js to start server
• Frontend: Run ng serve for a dev server then navigate to http://localhost:4200/.
• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

• extract from error-interceptor.ts

// intercept method; attached to every outgoing http request
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = 'An unknown error occured';
        if (error.error.message) {
          errorMessage = error.error.message;
          this.dialog.open(ErrorComponent, { data: { message: errorMessage } });
        }
        return throwError(error);
      })
    );
  }

🆒 Features

• Spinner is displayed while data loading, controlled by a boolean valuexº

📋 Status & To-Do List

• Status: Incomplete. Backend connects to database and frontend displays login page. Sign-up and Login not working. Update or replace.
• To-Do: Show add post form

👏 Inspiration

• MEAN Stack Tutorial)
• Stackoverflow: Can't connect mongoDB database to Atlas due to server and shell mismatch

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]