full project see shared repo for detailed commit history

arts-gallery/README.md

@@ -1,104 +1,91 @@
-# ArtsGallery
+# Art Gallery
 
-You will be creating a full-stack application to save paintings into a gallery by uploading them and saving them into a database. In order to do this you will be using MongoDB with the [Mongoose ODM](http://mongoosejs.com/). Your front end will display views created from data in the database. You will use [ReactJS](https://facebook.github.io/react/) for that, and will serve your application with a [NodeJS](https://nodejs.org/) web server, using [ExpressJS](https://expressjs.com/).
+Full-stack application to save paintings into a gallery by uploading them and saving them into a database.
 
-Please work on the following features **in order**, moving on to the next feature only after the one you are working on is complete. **Please commit WORKING code early and often**. In addition, after each step, please follow the guidelines for a commit message.
+## Tech Stack
 
-### Part 1 - Paintings Gallery
+**Client:** React
 
-1. **As a user**, I want to be able to view the paintings I have in my gallery. If no paintings are present in the database, I will have to see a message indicating that `No paintings in Gallery` and a button to upload new ones.
+**Server:** Node, Express, MongoDB, Cloudinary, Multer
 
-To implement this user story, you should:
+## API Reference
 
-- Write an ExpressJS web server that listens to request on port `8000`.
-- Run this command a brand new React App in a folder named `client`. Then navigate to it.
-  ```
-  npx create-react-app client
-  cd client/
-  ```
-- You may want to use [React Router](https://reactrouter.com/) or [Conditional Rendering](https://www.reactjs.org/docs/conditional-rendering.html) to navigate between components.
-- Write a script that would add the dummy data to your database when `npm run seed-database` is run from the command line. Add this command to the `package.json` to be able to run it with `npm`. When you have this working, run the command so that your database is populated.
-  \_Note: Create a Painting Schema under `server/models/Painting.js`. It should have these following attributes:
-  - `id`: Number
-  - `artist`: String _(for the author field)_
-  - `name`: String
-  - `year`: Number
-- Complete the route `/api/paintings` in `server/routes/paintings.routes.js` so that requests to this route are responded to with the data for all the paintings, retrieved from the database.
-- You can use the `dummy_data.js` for your front end views. Then, you can refactor your front end to retrieve seed data from the server rather than using the dummy data.
-- Render each painting in a `Card` containing the image, the name, the artist, and the date.
-- **WHEN COMPLETE AND WORKING, make a commit that says `Part 1 Complete`**
+#### Get all paintings
 
-### Part 2 - Create new Paintings
+```http
+  GET /api/v1/paintings
+```
 
-1. **As a user**, I want to be able to create new Paintings and save them in the database. First, make this feature work with a simple form where the user can manually input:
+#### Get ONE painting
 
-- Name
-- Artist
-- Year
-- Painting url
-  For consistency, use real data from the internet when you test your application.
+```http
+  GET /api/v1/paintings/${id}
+```
 
-2. **As a user**, I want to be able create new Paintings by uploading images from my local machine.
-   For this, you should:
+| Parameter | Type     | Description                       |
+| :-------- | :------- | :-------------------------------- |
+| `_id`      | `ObjectID` | **Required**. Id of painting to fetch |
 
-- Add an input of type `file` to your form where user can upload images
-- Use `FormData` to send a request including data and files
-- Use [multer](https://www.npmjs.com/package/multer) to handle requests including files
-- Use [Cloudinary](https://cloudinary.com/) to store images in the cloud and generate urls
-- Save the Painting with the data from the inputs and the url generated by Cloudinary
 
-- **WHEN COMPLETE AND WORKING, make a commit that says `Part 2 Complete`**
 
-### Part 3 - Edit Existing Paintings
+#### Create painting
 
-1. **As a user**, I want to update existing paintings in the database.
+```http
+  POST /api/v1/paintings
+```
 
-- With every Painting Card, there should be an `Edit` button.
-- When the user clicks on `Edit`, a new `Modal` should be rendered
-- The `Modal` will contain a **prefilled** form with the data of the selected painting
-- The user can click on `Cancel` to close the Modal
-- The user can update the data and click on `save`
-- The modal will be closed and the data of the painting will be updated in the `PaitningList` component
+#### Update painting
 
-- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`**
+```http
+  GET /api/v1/paintings/${id}
+```
 
-### Part 4 - Delete Painting
+| Parameter | Type     | Description                       |
+| :-------- | :------- | :-------------------------------- |
+| `_id`      | `ObjectID` | **Required**. Id of painting to update |
 
-1. **As a user**, I want to be able to delete existing paintings from the database
+#### Delete painting
 
-- Each painting card will contain a `Delete` button
-- When the user clicks on the `Delete` button, a `Modal` will be rendered with 2 options: `Confirm` and `Cancel`
-- Clicking on `Confirm` will delete the painting and close the modal
-- The painting will no longuer exist in the `PaintingList` component
+```http
+  GET /api/paintings/${id}
+```
 
-- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`**
+| Parameter | Type     | Description                       |
+| :-------- | :------- | :-------------------------------- |
+| `_id`      | `ObjectID` | **Required**. Id of painting to delete |
 
-### API Structure
+## Installation
 
-> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section
+Clone the project into your local machine
 
-Using the existing code provided in `server/`, follow the steps below to build out a Paintings API:
+```bash
+  git clone https://github.com/WaelChettaoui/art-gallery.git
+  cd art-gallery
+```
+⚠ BEFORE RUNNING THE PROJECT, YOU MUST CONFIGURE YOUR .env FILE ⚠
 
-|        URL         | HTTP Verb | Request Body |                                 Result                                 |
-| :----------------: | :-------: | :----------: | :--------------------------------------------------------------------: |
-|   /api/paintings   |    GET    |    empty     |                      Return JSON of all Paintings                      |
-|   /api/paintings   |   POST    |     JSON     |        Create new Painting and return JSON of created Painting         |
-| /api/paintings/:id |  DELETE   |    empty     |         Return JSON of single Painting with matching `number`          |
-| /api/paintings/:id |    PUT    |   FormData   | Update Painting with matching `id` and return JSON of updated Painting |
+Switch into the server folder and install the dependencies
 
-## Available Resources
+```bash
+  cd server
+  npm i
+```
 
-- [Stack Overflow](http://stackoverflow.com/)
-- [MDN](https://developer.mozilla.org/)
-- [ExpressJS Docs](https://expressjs.com/)
-- [Body Parser Middleware Docs](https://github.com/expressjs/body-parser)
-- [Mongo Docs](https://www.mongodb.com/)
-- [Mongoose ODM Docs](http://mongoosejs.com/)
-- [Cloudinary API](https://cloudinary.com/documentation/node_integration)
-- [ReactJS Docs](https://facebook.github.io/react/)
-- [React Router Docs](https://github.com/ReactTraining/react-router/tree/master/docs)
-- [NodeJS Docs](https://nodejs.org/)
-- [Academind Node-Multer](https://www.youtube.com/watch?v=srPXMt1Q0nY&ab_channel=Academind) to learn how to handle uploaded images in Node
-- [Academind React Image Upload](https://www.youtube.com/watch?v=XeiOnkEI7XI&ab_channel=Academind) to learn how to upload images in React
-- [Postman](https://www.getpostman.com/)
-- Docs for any npm packages you might use
+Switch into the client folder and install the dependencies
+
+```bash
+  cd ../client
+  npm i
+```
+
+Run the project
+```bash
+  cd ..
+  npm run dev
+```
+
+## Authors
+
+- [@mohamedazizkallel](https://github.com/mohamedazizkallel)
+- [@sfareya](https://github.com/sfareya)
+- [@WaelChettaoui](https://github.com/WaelChettaoui)

arts-gallery/build/asset-manifest.json

@@ -0,0 +1,19 @@
+{
+  "files": {
+    "main.css": "/static/css/main.54154059.css",
+    "main.js": "/static/js/main.3024df65.js",
+    "static/js/787.3f66ae2f.chunk.js": "/static/js/787.3f66ae2f.chunk.js",
+    "static/media/image3.png": "/static/media/image3.7a509860ab81244138e9.png",
+    "static/media/image1.png": "/static/media/image1.e09f5a71d9e45d679e9b.png",
+    "static/media/image2.png": "/static/media/image2.4384c497b2f9a55956f7.png",
+    "static/media/logo.svg": "/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg",
+    "index.html": "/index.html",
+    "main.54154059.css.map": "/static/css/main.54154059.css.map",
+    "main.3024df65.js.map": "/static/js/main.3024df65.js.map",
+    "787.3f66ae2f.chunk.js.map": "/static/js/787.3f66ae2f.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.54154059.css",
+    "static/js/main.3024df65.js"
+  ]
+}

arts-gallery/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.3024df65.js"></script><link href="/static/css/main.54154059.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

arts-gallery/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

arts-gallery/build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: