⚡ MEAN GraphQL CRUD

A MongoDB Express Angular Node.js (MEAN) full-stack app using Apollo and GraphQL to get data from a MongoDB database.
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

⚡ Next API Data

📚 General Info

Very basic Angular front-end where user can create read and delete database records with fields: name, quotation & an ID automatically assigned
From http://localhost:3000/graphql GraphQL can be used to query (GET) and mutate (POST, PUT, DELETE etc.) database records. Records can only be edited from here (i.e. not from the Angular frontend)
MongoDB Atlas backend database
Data is passed using GraphQL and Apollo using Apollo-Angular HTTP

📷 Screenshots

📶 Technologies

Node.js v16 javascript runtime using the Chrome V8 engine
Angular v13 frontend
GraphQL v16
Apollo v3 GraphQL implementation data graph layer
Apollo Client v3 caching GraphQL client to UI components can fetch data via GraphQL. More documentation here.
Apollo Angular v3 caching GraphQL server. Website

💾 Setup

Backend

From /backend run npm i to install dependencies
Create backend/config.json then add database access credentials - see config.example.json
npm run start to run the backend in dev. mode. Open http://localhost:3000 to view it in the browser. Restarts itself if code updated

Frontend

From /frontend run npm i to install dependencies
npm run start to run frontend in dev. mode.

💻 Code Examples

backend/graphql/resolvers function to return an array of quotes with id using the map function

	quotes: async function () {
		const quotes = await Quote.find();
		return {
			quotes: quotes.map((q) => {
				return {
					...q._doc,
					_id: q._id.toString(),
				};
			}),
		};
	},

📋 Status & To-Do List

Status: Part-working. Backend connects, Frontend error: ERROR Error: Http failure response for https://48p1r2roz4.sse.codesandbox.io/:
To-Do: Add edit to frontend. Add styles

AndrewJBateman/mean-graphql-crud

⚡ MEAN GraphQL CRUD

📄 Table of contents

📚 General Info

📷 Screenshots

📶 Technologies

💾 Setup

💻 Code Examples

📋 Status & To-Do List

👏 Inspiration

📁 License

✉️ Contact