https://github.com/andrewjbateman/mean-graphql-crud
:clipboard: Full-stack MEAN app with Create, Read, Update & Delete functionality.
https://github.com/andrewjbateman/mean-graphql-crud
angular angular-material angular13 backend css3 express-middleware frontend graphql html5 mean-stack mongodb mongodb-database node-js nodejs nodemon typescript2 typescript4
Last synced: 7 months ago
JSON representation
:clipboard: Full-stack MEAN app with Create, Read, Update & Delete functionality.
- Host: GitHub
- URL: https://github.com/andrewjbateman/mean-graphql-crud
- Owner: AndrewJBateman
- Created: 2019-03-01T17:17:35.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T09:43:30.000Z (over 2 years ago)
- Last Synced: 2025-02-01T12:26:52.626Z (9 months ago)
- Topics: angular, angular-material, angular13, backend, css3, express-middleware, frontend, graphql, html5, mean-stack, mongodb, mongodb-database, node-js, nodejs, nodemon, typescript2, typescript4
- Language: TypeScript
- Homepage:
- Size: 9.21 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :zap: 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_
## :page_facing_up: Table of contents
* [:zap: Next API Data](#zap-next-api-data)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General Info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:clipboard: Status & To-Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :books: 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](https://apollo-angular.com/docs/data/network)
## :camera: Screenshots
.
## :signal_strength: Technologies
* [Node.js v16](https://nodejs.org/) javascript runtime using the [Chrome V8 engine](https://v8.dev/)
* [Angular v13](https://angular.io/) frontend
* [GraphQL v16](https://github.com/graphql/graphql-js)
* [Apollo v3](https://www.apollographql.com/) GraphQL implementation data graph layer
* [Apollo Client v3](https://www.npmjs.com/package/apollo-client) caching GraphQL client to UI components can fetch data via GraphQL. More documentation [here](https://apollographql.com/docs/react/).
* [Apollo Angular v3](https://www.npmjs.com/package/apollo-angular) caching GraphQL server. [Website](https://apollo-angular.com/)
## :floppy_disk: 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](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.
## :computer: Code Examples
* `backend/graphql/resolvers` function to return an array of quotes with id using the map function
```javascript
quotes: async function () {
const quotes = await Quote.find();
return {
quotes: quotes.map((q) => {
return {
...q._doc,
_id: q._id.toString(),
};
}),
};
},
```
## :clipboard: 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
## :clap: Inspiration
* [Jon Peppinck: Angular GraphQL MEAN Apollo CRUD API](https://www.youtube.com/watch?v=zCMNvnlDoVg)
## :file_folder: License
* N/A
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com