diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 1480aee..0000000 --- a/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -*.log -.DS_Store -bower_components -node_modules -package-lock.json \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index df53d8a..0000000 --- a/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Final Projects - -## Introduction - -Welcome to Final Projects. This repository will serve as the starter for your final full-stack project. -Before starting, make sure: - -- [ ] You have chosen your teammates for the project -- [ ] You have created an organisation and all your teammates are members - -Make sure that you have already created your own **organisation** with your teammates - -## Get Started - -- [ ] Fork the repository under your organisation -- [ ] Each member should clone the forked repository on his local machine -- [ ] Choose one of the projects that has not been reserved - -## Team composition - -Edit this file by filling your team composition here: - -- [ ] _Student full name_ | _Github username_ | **Scrum Master** -- [ ] _Student full name_ | _Gihub username_ -- [ ] _Student full name_ | _Gihub username_ - -## Technologies - -In you assignment, you have to use all the following Technologies - -- React -- NodeJS -- Express - -Choose one of these Technologies for your DBMS and your ORM - -- [ ] MongoDB + Mongoose -- [ ] MySQL + Sequelize - -Feel free to use any of these technologies - -- Redux -- Bootstrap -- Tailwind -- Gatsby -- ... - -## Submission - -Your final Deadline for submission is **`the 11th of December 2021`**. A weekly follow up session can be organised on demand. - -To submit your work: - -- [ ] Make a demo of your project and upload it to [this folder](https://drive.google.com/drive/folders/14ndlnd1BK9EF7XdZLrgrNdtidr3X-r0a?usp=sharing). If you feel like you need help to get over this, refer to the steps in the [recording guidelines](./RECORDING.md). -- [ ] Deploy your application to one of these [free hosting services](https://blogs.devchallenges.io/posts/tJ26U8MhZTPgBSRSwpqr) or to [heroku](https://www.heroku.com/) -- [ ] Create a Pull Request from your forked repository diff --git a/RECORDING.md b/RECORDING.md deleted file mode 100644 index 605cfd4..0000000 --- a/RECORDING.md +++ /dev/null @@ -1,61 +0,0 @@ -## How to Record Your Screen - -This document details how to create a recording of your screen If you are using these instructions for a recorded student assessment, you should receive specific directions from your instruction team regarding how to turn in your screen recording file. - -- [PC](#pc) -- [Mac](#mac) - -_NOTE: Recording several hours of screen capture will use a large amount of data, up 4GB PER HOUR. Please make sure you have enough free storage space to accommodate your screen capture data!_ - -## PC - -Download and install [OBS Classic](https://obsproject.com/). It's free and open source! - -### To start recording - -Update the following Settings (click `Apply` between each step): - -| Encoding | Broadcast Settings | -| ----------------------- | -------------------------------------------- | -| Max Bitrate (kb/s): 192 | Mode: File Output Only | -| | File Path: firstname-lastname-yyyy-mm-dd.mp4 | -| | Video: FPS: 15 | - -Add a Monitor Capture source: - -- Right click the `Sources:` box and click `Add -> Monitor Capture` -- Give it any name, the default is fine -- Click `OK`, the default options are fine - -From the main screen, click `Start Recording`, and minimize the program. - -### To stop recording - -Simply click `Stop Recording` and your screen recording will show up at the `File Path` you specified. - -## Mac - -### To begin recording - -- Launch QuickTime Player from Finder or Alfred/Spotlight. -- In QuickTime Player, go to the `File -> New screen recording` -- Click the down arrow next to the record button and enable `Show Mouse Clicks in Recording` - -![screen shot 2016-05-25 at 4 15 41 pm](https://cloud.githubusercontent.com/assets/6980359/15559089/16ed9072-2294-11e6-8348-0c8ad7a1d963.png) - -- Click the red record button to initiate the screen recording -- QuickTime will show you a notice in the middle of the screen as show in the screen shot below -- click on it confirm the screen capture and begin recording - -![screen shot 2016-05-25 at 4 15 48 pm](https://cloud.githubusercontent.com/assets/6980359/15559088/16ecd8e4-2294-11e6-8d3d-a3ed5302e856.png) - -To check that QuickTime is actively recording, look for the black stop button (square) inside a circle, in the system tray: - -![screen shot 2016-05-25 at 4 16 03 pm](https://cloud.githubusercontent.com/assets/6980359/15559090/16ee19b6-2294-11e6-8c9b-260c4e7afa23.png) - -### To stop recording - -Open QuickTime Player by clicking the the black stop button (square inside a circle) in the system tray - -![screen shot 2016-05-25 at 4 16 03 pm](https://cloud.githubusercontent.com/assets/6980359/15559090/16ee19b6-2294-11e6-8c9b-260c4e7afa23.png) - -Choose `File -> Save`, and name your video file `groupName-yyyy-mm-dd` diff --git a/arts-gallery/README.md b/arts-gallery/README.md deleted file mode 100644 index 9cc366c..0000000 --- a/arts-gallery/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# ArtsGallery - -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/). - -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. - -### Part 1 - Paintings Gallery - -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. - -To implement this user story, you should: - -- 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`** - -### Part 2 - Create new 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: - -- Name -- Artist -- Year -- Painting url - For consistency, use real data from the internet when you test your application. - -2. **As a user**, I want to be able create new Paintings by uploading images from my local machine. - For this, you should: - -- 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 - -1. **As a user**, I want to update existing paintings in the database. - -- 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 - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`** - -### Part 4 - Delete Painting - -1. **As a user**, I want to be able to delete existing paintings from the database - -- 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 - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** - -### API Structure - -> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section - -Using the existing code provided in `server/`, follow the steps below to build out a Paintings API: - -| 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 | - -## Available Resources - -- [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 diff --git a/arts-gallery/dummy_data.js b/arts-gallery/dummy_data.js deleted file mode 100644 index 39ce787..0000000 --- a/arts-gallery/dummy_data.js +++ /dev/null @@ -1,30 +0,0 @@ -module.exports = [ - { - 'id': 1234, - 'name': 'Guernica', - 'artist': 'Picasso', - 'image': 'https://www.worldatlas.com/r/w960-q80/upload/ca/27/70/shutterstock-337184468.jpg', - 'year': 1937 - }, - { - 'id': 5265, - 'name': 'The Girl With A Pearl Earring', - 'artist': 'Johannes Vermeer', - 'image': 'https://www.worldatlas.com/r/w960-q80/upload/9d/d2/c4/meisje-met-de-parel.jpg', - 'year': 1665 - }, - { - 'id': 4487, - 'name': 'The Scream', - 'artist': 'Edvard Munch', - 'image': 'https://www.worldatlas.com/r/w960-q80/upload/5f/96/29/edvard-munch-1893-the-scream-oil-tempera-and-pastel-on-cardboard-91-x-73-cm-national-gallery-of-norway.jpg', - 'year': 1893 - }, - { - 'id': 8357, - 'name': 'The Starry Night', - 'artist': 'Vincent van Gogh', - 'image': 'https://www.worldatlas.com/r/w960-q80/upload/1f/e7/fd/1280px-van-gogh-starry-night-google-art-project.jpg', - 'year': 1889 - } - ]; \ No newline at end of file diff --git a/arts-gallery/server/db/index.js b/arts-gallery/server/db/index.js deleted file mode 100644 index 433babf..0000000 --- a/arts-gallery/server/db/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your Database Connection comes here - */ \ No newline at end of file diff --git a/arts-gallery/server/index.js b/arts-gallery/server/index.js deleted file mode 100644 index 66cd61e..0000000 --- a/arts-gallery/server/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your server comes here - */ \ No newline at end of file diff --git a/controllers/product-controller.js b/controllers/product-controller.js new file mode 100644 index 0000000..e92f6b1 --- /dev/null +++ b/controllers/product-controller.js @@ -0,0 +1,57 @@ +import { request, response } from 'express'; +import Product from '../model/product-schema.js'; + +export const getProducts = async (request, response) => { + try{ + let product = await Product.find(); + response.json(product); + }catch(error){ + response.json({message: error.message}); + } + +} + +export const addProduct = async (request, response) => { + const product = request.body; + const newProduct = new Product(product); + + try{ + await newProduct.save(); + response.json(newProduct); + }catch(error){ + response.json({message: error.message}); + } +} + +export const getProductById = async(request, response) =>{ + const id = request.params.id; + try{ + const product = await Product.findById(id); + response.json(product); + }catch(error){ + response.json({message: error.message}); + } +} + +export const editProduct = async (request,response) => { + const product = request.body; + + const editProduct = new Product(product); + + try{ + await Product.updateOne({ _id: request.params.id}, editProduct); + response.json(editProduct); + }catch(error) { + response.json({message: error.message}); + } +} + +export const deleteProduct = async (request, response) => { + try{ + await Product.deleteOne({ _id: request.params.id}); + response.json("Product Deleted Successfully"); + }catch(error) { + response.json({message: error.message}); + + } +} \ No newline at end of file diff --git a/gift-store/README.md b/gift-store/README.md deleted file mode 100644 index c78a400..0000000 --- a/gift-store/README.md +++ /dev/null @@ -1,115 +0,0 @@ -# Gift Store - -You will be creating a full-stack application to manage your gift store. It will allow the owner of the stoer to execute all CRUD operations on his gifts,. 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/). - -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. - -### Part 1 - Products Table - -1. **As a user**, I want to be able to view the products I have in my database. If no product are present in the database, I will have to see a message indicating that `You have no product` and a button to create new ones. - -To implement this user story, you should: - -- Write an ExpressJS web server that listens to request on port `8000`. -- Run this command to create 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 Product Schema under `server/models/Product.js`. It should have these following attributes: - - `id`: Number - - `category`: String - - `quantity`: Number - - `brand`: String - - `image`: String _(the url of the image)_ -- Complete the route `/api/products` in `server/routes/products.routes.js` so that requests to this route are responded to with the data for all the products, 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 the products in a `Table` containing the image, the name, the brand, the category, the price and the quantity -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 1 Complete`** - -### Part 2 - Create new Products - -1. **As a user**, I want to be able to create new products and save them in the database. Create a `NewTask` component containing these inputs: - -- `Name`: text -- `Category`: text -- `Quantity`: positive number -- `Price`: positive number -- `Image`: text (the url of the image) - -The data from the form should be sent to `/api/products` and saved to the database. - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 2 Complete`** - -### Part 3 - Edit Existing Products - -1. **As a user**, I want to update the existing products in my management system. - -- With every `Row` in the products table, there should be an `Edit` button. -- When the user clicks on `Edit`, a `Modal` should be rendered -- The `Modal` should contain a form similar to the `CreateProduct` form -- The inputs should be prefilled with `defualtValues` of the product data with 2 buttons (`save` / `cancel`) -- The user can click on `Cancel` to cancel changes -- The user can update the data and click on `save` -- The Modal should be closed and the `Table` should be updated with the nes data -- You should send a PUT request to `/api/products/:id` with the new data from the form - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`** - -### Part 4 - Delete existing products - -1. **As a user**, I want to delete products. - -- With every `Row` in the products table, there should be a `Delete` button. -- When the user clicks on `Delete`, a `Modal` should be rendered -- The `Modal` should contain 2 buttons: `Confirm` and `Cancel` -- Clicking on `Cancel` will close the Modal -- Clicking on `Delete` should delete the selected Product and close the Modal -- The deleted Product should no longer appear in the `ProductsList` - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** - -### Part 5 - Predefined Categories - -1. **As a user**, I want to group products by category - -- Create a `Category.js` model, `categories.routes.js` router, and a `categories.controller.js` controller -- Each Category should have: - - id: String - - title: String -- Create new categories through Postman -- Refactor the Category input in `CreateProduct` form to be a `Dropdown` containing the categories' titles - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 5 Complete`** - -### API Structure - -> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section - -Using the existing code provided in `server/`, follow the steps below to build out a Paintings API: - -| URL | HTTP Verb | Request Body | Result | -| :---------------: | :-------: | :----------: | :----------------------------------------------------------: | -| /api/products | GET | empty | Return JSON of all products | -| /api/products | POST | JSON | Create new Product and return JSON of created Product | -| /api/products/:id | DELETE | empty | Return JSON of single Product with matching `id` | -| /api/products/:id | PUT | JSON | Update Product with matching `id` and return updated Product | -| /api/categories | POST | JSON | Create a new category | -| /api/categories | GET | JSON | Return JSON of all categories | - -## Available Resources - -- [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/) -- [Postman](https://www.getpostman.com/) -- Docs for any npm packages you might use diff --git a/gift-store/dummy_data.js b/gift-store/dummy_data.js deleted file mode 100644 index 860ee91..0000000 --- a/gift-store/dummy_data.js +++ /dev/null @@ -1,34 +0,0 @@ -module.exports = [ - { - 'id': 1234, - 'name': 'JBL Live 460NC', - 'category': 'Audio', - 'brand': 'JBL', - 'image': 'https://m.media-amazon.com/images/I/61Kq-Pz8d-L._AC_SL1200_.jpg', - 'quantity': 10 - }, - { - 'id': 5265, - 'name': 'JBL CHARGE 5', - 'category': 'Audio', - 'brand': 'JBL', - 'image': 'https://m.media-amazon.com/images/I/71Gk3H-tIqL._AC_SL1500_.jpg', - 'quantity': 5 - }, - { - 'id': 4487, - 'name': 'Roku Smart TV', - 'category': 'Video', - 'brand': 'Roku', - 'image': 'https://m.media-amazon.com/images/I/71gzlKauNQL._AC_SL1500_.jpg', - 'quantity': 7 - }, - { - 'id': 8357, - 'name': 'Razer Viper Ultimate', - 'category': 'Accessories', - 'brand': 'Razer', - 'image': 'https://m.media-amazon.com/images/I/6157EeRHinL._AC_SL1500_.jpg', - 'quantity': 1 - } -]; \ No newline at end of file diff --git a/gift-store/server/db/index.js b/gift-store/server/db/index.js deleted file mode 100644 index 05aaea5..0000000 --- a/gift-store/server/db/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Connect to the Database with Mongoose here - */ \ No newline at end of file diff --git a/gift-store/server/index.js b/gift-store/server/index.js deleted file mode 100644 index 66cd61e..0000000 --- a/gift-store/server/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your server comes here - */ \ No newline at end of file diff --git a/hacker-news/README.md b/hacker-news/README.md deleted file mode 100644 index 8bae6dd..0000000 --- a/hacker-news/README.md +++ /dev/null @@ -1,127 +0,0 @@ -# HackerNews - -You will be creating a full-stack application to display analytics about [HackerNews](https://news.ycombinator.com/) and its users. In order to do this you will be interacting with the [HackerNews API](https://github.com/HackerNews/API) using a worker process, and storing data from your calls to the API in MongoDB, using 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/). - -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. - -### Part 1 - Top Ten Stories - -1. **As a user**, I want to be able to view the Top Ten Stories on Hacker News (for now, this will be accomplished with the dummy data provided, not live data from the Hacker News API). - -_Please see mockup below - remember, you do NOT need to match the styling, just the content structure._ - -![top-ten-stories](./assets/top-ten-stories.png) - -To implement this user story, you should: - -- 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 the Story Schema under `server/models/Story.js`. It should have these following attributes: - - `id`: Number - - `by`: String _(for the author field)_ - - `title`: String - - `score`: String -- Complete the route `/api/stories` in `server/routes/stories.routes.js` so that requests to this route are responded to with the data for the top ten stories, 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. -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 1 Complete`** - -### Part 2 - Authors of Top Stories - -1. **As a user**, I want to be able to view the authors of the top ten stories, sorted by their karma (for now, this will be accomplished with the seed data retrieved from the server, not live data from the Hacker News API). -1. **As a user**, I want to be able to switch between the top ten stories view and the top ten authors view. - -_Please see mockup below - remember, you do NOT need to match the styling, just the content structure._ - -![top-ten-authors](./assets/top-ten-story-authors.png) - -To implement this user story, you should: - -- Create any new components or directives as necessary -- Create any new server side routes as necessary -- Create or update any database schemas and models as necessary -- Modify the seed.js file to also add author information to the mongo database (if needed, look up how to drop your existing stories collection) - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 2 Complete`** - -### Part 3 - Worker - -1. **As a user**, I want up to date information about the top ten stories, not just seed data. -1. **As a developer**, I want an easy way to add up to date information about the top ten stories to the database. - -To implement this user and developer story, you should: - -- Build out `worker.js` to store the top stories and top authors it gets from the [HackerNews API](https://github.com/HackerNews/API) in MongoDB, using `db/models/story.js`. You will have to use the ids from your initial request to the API, in order to make additional API requests for stories, as well as use the author username to make additional API requests for author information. (_NOTE: A story's score is not directly related to its rank. You may confirm the current top 10 stories by going to [Hacker News](https://news.ycombinator.com/)_). -- Add an additional npm script to the `package.json` so that a developer could run the worker.js file to populate the database instead of the seed.js script - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`** - -### Part 4 - Author Search - -1. **As a user**, I want to be able to see a list of stories by a certain author. -1. **As a user**, I want to be able to switch between the top ten stories view, the top ten authors view, and the author search view. -1. **As a developer**, I want to be able to save the story information retrieved from the HackerNews API in the database so that I don't have to fetch it from the API every time. - -_Please see mockups below - remember, you do NOT need to match the styling, just the content structure._ - -![author-search-a](./assets/author-search-a.png) -![author-search-b](./assets/author-search-b.png) - -To implement this user and developer story, you should: - -- Create any new components or directives as necessary -- Create any new server side routes as necessary -- Create or update any database schemas and models as necessary - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** - -### Part 5 - Story Recommendations - -1. **As a user**, when I click on a story in the top ten view, I want to be able to see 10 other stories _similar_ to this story. -1. **As a user**, I want to be able to switch between the top ten stories view, the top ten authors view, the author search view, and the recommended story view. - -_Please see mockup below - remember, you do NOT need to match the styling, just the content structure._ - -![recommended-stories.png](./assets/recommended-stories.png) - -To implement this user story, you should: - -- Find ten similar stories using the following specification: - - - Recommend stories based on number of shared commenters it has with the story you clicked on. For example, if the story you clicked on has, 4 commenters, _CommenterA_, _CommenterB_, _CommenterC_, and _CommenterD_, a highly recommended story would be another story that all 4 of these same commenters have commented on. A less recommended story would be one that only 3 of the 4 commenters commented on. You would never recommend a story that none of the 4 commenters have commented on. These recommended stories do not have to, and will most likely not, be in the top ten current stories. - - If the story has the same number of shared commenters, sort the story with the highest score first. - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 5 Complete`** - -### Part 6 - Live Update - -1. **As a developer**, I want the top ten stories in the database to refresh every minute. - -To implement this developer story, you should: - -- Refactor your application so that `worker.js` runs every minute. -- Refactor you application so that your views automatically refresh when `worker.js` provides it with new data that would affect the view. - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 6 Complete`** - -## Available Resources - -- [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/) -- [HackerNews API](https://github.com/HackerNews/API) -- [ReactJS Docs](https://facebook.github.io/react/) -- [React Router Docs](https://github.com/ReactTraining/react-router/tree/master/docs) -- [NodeJS Docs](https://nodejs.org/) -- [ExpressJS Docs](https://expressjs.com/) -- [Postman](https://www.getpostman.com/) -- Docs for any npm packages you might use -- [Google Search](https://google.com) to search for the correct page on any of the documentation above diff --git a/hacker-news/assets/author-search-a.png b/hacker-news/assets/author-search-a.png deleted file mode 100644 index 8cacfef..0000000 Binary files a/hacker-news/assets/author-search-a.png and /dev/null differ diff --git a/hacker-news/assets/author-search-b.png b/hacker-news/assets/author-search-b.png deleted file mode 100644 index c3c5a26..0000000 Binary files a/hacker-news/assets/author-search-b.png and /dev/null differ diff --git a/hacker-news/assets/recommended-stories.png b/hacker-news/assets/recommended-stories.png deleted file mode 100644 index b6374a4..0000000 Binary files a/hacker-news/assets/recommended-stories.png and /dev/null differ diff --git a/hacker-news/assets/top-ten-stories.png b/hacker-news/assets/top-ten-stories.png deleted file mode 100644 index 65a2467..0000000 Binary files a/hacker-news/assets/top-ten-stories.png and /dev/null differ diff --git a/hacker-news/assets/top-ten-story-authors.png b/hacker-news/assets/top-ten-story-authors.png deleted file mode 100644 index 7f0b92b..0000000 Binary files a/hacker-news/assets/top-ten-story-authors.png and /dev/null differ diff --git a/hacker-news/dummy_data.js b/hacker-news/dummy_data.js deleted file mode 100644 index 81bd5a4..0000000 --- a/hacker-news/dummy_data.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = [ - { - 'by': { - 'about': 'My name is Erik', - 'id': 'erikdbrown', - 'karma': 15319, - }, - 'id': 123456789, - 'score': 392, - 'title': 'How to write fun technical assessments for everyone!', - }, - { - 'by': { - 'about': 'my favorite color is grey', - 'id': 'beth', - 'karma': 1000, - }, - 'id': 10000000, - 'score': 497, - 'title': 'Where to find all of the cool dogs', - } - ]; \ No newline at end of file diff --git a/hacker-news/server/db/index.js b/hacker-news/server/db/index.js deleted file mode 100644 index 433babf..0000000 --- a/hacker-news/server/db/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your Database Connection comes here - */ \ No newline at end of file diff --git a/hacker-news/server/index.js b/hacker-news/server/index.js deleted file mode 100644 index 21a0968..0000000 --- a/hacker-news/server/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your server comes here -**/ \ No newline at end of file diff --git a/hacker-news/worker.js b/hacker-news/worker.js deleted file mode 100644 index f784903..0000000 --- a/hacker-news/worker.js +++ /dev/null @@ -1,36 +0,0 @@ -var mongoose = require('mongoose'); -var request = require('request'); - -mongoose.connect('mongodb://localhost/hackednews'); -// In this file, build out a worker that will populate the database -// with the data you need from the HackerNews API - - -// Here is an example of getting the top 500 stories from the API -// and logging them to the console. -// You are not required to use this code (though you may). -var topStoriesURL = 'https://hacker-news.firebaseio.com/v0/topstories.json'; - -var isJSONResponse = function(headers) { - return headers['content-type'].includes('json'); -}; - -var getJSONFromHackerNews = function (url, callback) { - request.get(url, function(err, response, body) { - var data = null; - if (err) { - callback(err, null); - } else if (!isJSONResponse(response.headers)) { - callback(new Error('Response did not contain JSON data.'), null); - } else { - data = JSON.parse(body); - callback(null, data); - } - }); -}; - -getJSONFromHackerNews(topStoriesURL, function(err, data) { - console.log(err, 'err, expect to be null'); - console.log(data, 'data, expect to be ids for top 500 stories'); - mongoose.disconnect(); -}); diff --git a/index.js b/index.js new file mode 100644 index 0000000..16b2b88 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +import express, {Router} from 'express'; +import mongoose from 'mongoose'; +import cors from 'cors'; +import bodyParser from 'body-parser'; + +import route from './route/routes.js'; + +const app= express(); + +app.use(bodyParser.json({ extended:true})); +app.use(bodyParser.urlencoded({ extended: true})) +app.use(cors()); +app.use('/products', route); + + +const PORT = 8000; +const URL='mongodb+srv://admin:helloadmin123@crud.k61nh.mongodb.net/Project0?retryWrites=true&w=majority'; + + + +mongoose.connect(URL, { useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false }).then(()=> { + app.listen(PORT, () => { + console.log('Server is running successfully on Port ${PORT} '); +}); + +}).catch(error => { + console.log('Error:' , error.message); +}) \ No newline at end of file diff --git a/model/product-schema.js b/model/product-schema.js new file mode 100644 index 0000000..f8727a8 --- /dev/null +++ b/model/product-schema.js @@ -0,0 +1,17 @@ +import mongoose from 'mongoose'; +import autoIncrement from 'mongoose-auto-increment'; + +const productSchema = mongoose.Schema({ + name: String, + category: String, + brand: String, + price: Number, + quantity: Number + +}); + +autoIncrement.initialize(mongoose.connection); +productSchema.plugin(autoIncrement.plugin, 'product'); +const product = mongoose.model('product', productSchema); + +export default product; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..efb31cd --- /dev/null +++ b/package-lock.json @@ -0,0 +1,54 @@ +{ + "name": "react", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "axios": "^0.24.0" + } + }, + "node_modules/axios": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", + "dependencies": { + "follow-redirects": "^1.14.4" + } + }, + "node_modules/follow-redirects": { + "version": "1.14.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz", + "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + } + }, + "dependencies": { + "axios": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", + "requires": { + "follow-redirects": "^1.14.4" + } + }, + "follow-redirects": { + "version": "1.14.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz", + "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4338ad2 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "axios": "^0.24.0" + } +} diff --git a/poke-mongo/README.md b/poke-mongo/README.md deleted file mode 100644 index 1a09e94..0000000 --- a/poke-mongo/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# Poké-MongoDB - -You are going to build a Pokémon API with Node, Express, and MongoDB. Your API will allow users to perform CRUD operations on each of the 151 original Pokémon, and power a front-end. - -## Project Structure - -The project contains 2 main directories - -- `server`: for your server side -- `client`: for your client side _(will be generated in the following steps)_ - -## Get Started - -## Requirements - -In addition to your frequent commits, **make a commit after completing each of the following steps** (marked by check boxes), indicating that you have just completed it. It may not be the case that you have time to complete all of the following steps, but regardless, **you must work on them in order.** - -- Back-end -- Front-end -- Middleware - -### Back-end - -> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section - -Using the existing code provided in `server/`, follow the steps below to build out a Pokémon API: - -| URL | HTTP Verb | Request Body | Result | -| :------------------: | :-------: | :----------: | :----------------------------------------------------------------------: | -| /api/pokemon | GET | empty | Return JSON of all Pokémon | -| /api/pokemon | POST | JSON | Create new Pokémon and return JSON of created Pokémon | -| /api/pokemon | DELETE | empty | Delete all Pokémon in and return JSON of deleted Pokémon | -| /api/pokemon/:number | GET | empty | Return JSON of single Pokémon with matching `number` | -| /api/pokemon/:number | PUT | JSON | Update Pokémon with matching `number` and return JSON of updated Pokémon | -| /api/pokemon/:number | DELETE | empty | Delete Pokémon with matching `number` and return JSON of deleted Pokémon | - -- [ ] Connect Mongoose to your local Mongo database in `db/index.js` -- [ ] Create a Pokémon model in `resources/pokemon/Pokemon.js` and register it with Mongoose as the `Pokemon` collection with the following properties: - - [ ] `number`, a unique number - - [ ] `name`, a unique string - - [ ] `types`, an array of strings - - [ ] `imgUrl`, a string -- [ ] Populate your Mongo database with the 151 original Pokémon found in `data/pokemon.json` -- [ ] Create a controller in `resources/pokemon/pokemonController.js` that interacts with your Pokémon model -- [ ] Create a router in `resources/pokemon/pokemonRouter.js` that utilizes each of your controller's methods. Be sure to handle errors appropriately. -- [ ] Import `pokemon.router` into `server.js` and assign it to the correct route - -### Front-end - -Inside of `client/`, implement a single page front end to interact with this API using React. - -Your front end should be served from Express and should allow the user to: - -- [ ] Display all Pokémon (with their images) -- [ ] Add a new Pokémon -- [ ] Filter Pokémon based on their type -- [ ] Edit existing Pokémon -- [ ] Delete Pokémon - -> **Instructions:** follow these instructions to have a well structured client application - -- [ ] Run this command a brand new React App in a folder named `client`. Then navigate to it. - -``` -npx create-react-app client -cd client/ -``` - -- [ ] Create a new folder called `components` -- [ ] Create the components that you'll need there: - - PokemonList.js - - PokemonDetails.js - - -- [ ] Use [React Router](https://reactrouter.com/) to route and pass data between components -- [ ] Create a `.env` file for your [environment variables](https://stackoverflow.com/questions/42182577/is-it-possible-to-use-dotenv-in-a-react-project), like so: - -``` -REACT_APP_API_URL="http://localhost:8000/api" -``` - -### Middleware (bonus) - -> **Important:** You must complete all of the steps in [back-end](#back-end) before moving onto this section. - -Inside of `server/middleware/rateLimiter.js`, create a custom middleware function in which you implement rate limiting for your API with the following guidelines. - -- [ ] Require each request to `/api/pokemon` to include a `User` property in the header -- [ ] Only allow a single user to make 100 requests per hour -- [ ] Mount your middleware in an appropriate location in `server/server.js` -- [ ] Update your front-end to send `user` property with each request - -### Available Resources - -You may visit each of these resources directly, or search for them on Google with the [`site:`](https://support.google.com/websearch/answer/2466433?hl=en) operator: - -- [MDN](https://developer.mozilla.org/en-US/) -- [Stack Overflow](http://stackoverflow.com/) -- [Express docs](https://expressjs.com/) -- [Mongo docs](https://docs.mongodb.com/) -- [Mongoose docs](http://mongoosejs.com/docs/index.html) -- [React docs](https://facebook.github.io/react/docs/getting-started.html) -- [Angular docs](https://docs.angularjs.org/api) -- [Backbone docs](http://backbonejs.org/) -- [Webpack docs](https://webpack.github.io/docs/) diff --git a/poke-mongo/data/pokemon.json b/poke-mongo/data/pokemon.json deleted file mode 100644 index 863c9ad..0000000 --- a/poke-mongo/data/pokemon.json +++ /dev/null @@ -1,908 +0,0 @@ -[ - { - "number": 1, - "name": "Bulbasaur", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/001.png?raw=true" - }, - { - "number": 2, - "name": "Ivysaur", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/002.png?raw=true" - }, - { - "number": 3, - "name": "Venusaur", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/003.png?raw=true" - }, - { - "number": 4, - "name": "Charmander", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/004.png?raw=true" - }, - { - "number": 5, - "name": "Charmeleon", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/005.png?raw=true" - }, - { - "number": 6, - "name": "Charizard", - "types": ["Fire", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/006.png?raw=true" - }, - { - "number": 7, - "name": "Squirtle", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/007.png?raw=true" - }, - { - "number": 8, - "name": "Wartortle", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/008.png?raw=true" - }, - { - "number": 9, - "name": "Blastoise", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/009.png?raw=true" - }, - { - "number": 10, - "name": "Caterpie", - "types": ["Bug"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/010.png?raw=true" - }, - { - "number": 11, - "name": "Metapod", - "types": ["Bug"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/011.png?raw=true" - }, - { - "number": 12, - "name": "Butterfree", - "types": ["Bug", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/012.png?raw=true" - }, - { - "number": 13, - "name": "Weedle", - "types": ["Bug", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/013.png?raw=true" - }, - { - "number": 14, - "name": "Kakuna", - "types": ["Bug", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/014.png?raw=true" - }, - { - "number": 15, - "name": "Beedrill", - "types": ["Bug", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/015.png?raw=true" - }, - { - "number": 16, - "name": "Pidgey", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/016.png?raw=true" - }, - { - "number": 17, - "name": "Pidgeotto", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/017.png?raw=true" - }, - { - "number": 18, - "name": "Pidgeot", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/018.png?raw=true" - }, - { - "number": 19, - "name": "Rattata", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/019.png?raw=true" - }, - { - "number": 20, - "name": "Raticate", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/020.png?raw=true" - }, - { - "number": 21, - "name": "Spearow", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/021.png?raw=true" - }, - { - "number": 22, - "name": "Fearow", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/022.png?raw=true" - }, - { - "number": 23, - "name": "Ekans", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/023.png?raw=true" - }, - { - "number": 24, - "name": "Arbok", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/024.png?raw=true" - }, - { - "number": 25, - "name": "Pikachu", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/025.png?raw=true" - }, - { - "number": 26, - "name": "Raichu", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/026.png?raw=true" - }, - { - "number": 27, - "name": "Sandshrew", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/027.png?raw=true" - }, - { - "number": 28, - "name": "Sandslash", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/028.png?raw=true" - }, - { - "number": 29, - "name": "Nidoran (♀)", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/029.png?raw=true" - }, - { - "number": 30, - "name": "Nidorina", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/030.png?raw=true" - }, - { - "number": 31, - "name": "Nidoqueen", - "types": ["Poison", "Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/031.png?raw=true" - }, - { - "number": 32, - "name": "Nidoran (♂)", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/032.png?raw=true" - }, - { - "number": 33, - "name": "Nidorino", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/033.png?raw=true" - }, - { - "number": 34, - "name": "Nidoking", - "types": ["Poison", "Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/034.png?raw=true" - }, - { - "number": 35, - "name": "Clefairy", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/035.png?raw=true" - }, - { - "number": 36, - "name": "Clefable", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/036.png?raw=true" - }, - { - "number": 37, - "name": "Vulpix", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/037.png?raw=true" - }, - { - "number": 38, - "name": "Ninetales", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/038.png?raw=true" - }, - { - "number": 39, - "name": "Jigglypuff", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/039.png?raw=true" - }, - { - "number": 40, - "name": "Wigglytuff", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/040.png?raw=true" - }, - { - "number": 41, - "name": "Zubat", - "types": ["Poison", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/041.png?raw=true" - }, - { - "number": 42, - "name": "Golbat", - "types": ["Poison", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/042.png?raw=true" - }, - { - "number": 43, - "name": "Oddish", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/043.png?raw=true" - }, - { - "number": 44, - "name": "Gloom", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/044.png?raw=true" - }, - { - "number": 45, - "name": "Vileplume", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/045.png?raw=true" - }, - { - "number": 46, - "name": "Paras", - "types": ["Bug", "Grass"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/046.png?raw=true" - }, - { - "number": 47, - "name": "Parasect", - "types": ["Bug", "Grass"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/047.png?raw=true" - }, - { - "number": 48, - "name": "Venonat", - "types": ["Bug", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/048.png?raw=true" - }, - { - "number": 49, - "name": "Venomoth", - "types": ["Bug", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/049.png?raw=true" - }, - { - "number": 50, - "name": "Diglett", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/050.png?raw=true" - }, - { - "number": 51, - "name": "Dugtrio", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/051.png?raw=true" - }, - { - "number": 52, - "name": "Meowth", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/052.png?raw=true" - }, - { - "number": 53, - "name": "Persian", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/053.png?raw=true" - }, - { - "number": 54, - "name": "Psyduck", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/054.png?raw=true" - }, - { - "number": 55, - "name": "Golduck", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/055.png?raw=true" - }, - { - "number": 56, - "name": "Mankey", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/056.png?raw=true" - }, - { - "number": 57, - "name": "Primeape", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/057.png?raw=true" - }, - { - "number": 58, - "name": "Growlithe", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/058.png?raw=true" - }, - { - "number": 59, - "name": "Arcanine", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/059.png?raw=true" - }, - { - "number": 60, - "name": "Poliwag", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/060.png?raw=true" - }, - { - "number": 61, - "name": "Poliwhirl", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/061.png?raw=true" - }, - { - "number": 62, - "name": "Poliwrath", - "types": ["Water", "Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/062.png?raw=true" - }, - { - "number": 63, - "name": "Abra", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/063.png?raw=true" - }, - { - "number": 64, - "name": "Kadabra", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/064.png?raw=true" - }, - { - "number": 65, - "name": "Alakazam", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/065.png?raw=true" - }, - { - "number": 66, - "name": "Machop", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/066.png?raw=true" - }, - { - "number": 67, - "name": "Machoke", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/067.png?raw=true" - }, - { - "number": 68, - "name": "Machamp", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/068.png?raw=true" - }, - { - "number": 69, - "name": "Bellsprout", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/069.png?raw=true" - }, - { - "number": 70, - "name": "Weepinbell", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/070.png?raw=true" - }, - { - "number": 71, - "name": "Victreebel", - "types": ["Grass", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/071.png?raw=true" - }, - { - "number": 72, - "name": "Tentacool", - "types": ["Water", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/072.png?raw=true" - }, - { - "number": 73, - "name": "Tentacruel", - "types": ["Water", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/073.png?raw=true" - }, - { - "number": 74, - "name": "Geodude", - "types": ["Rock", "Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/074.png?raw=true" - }, - { - "number": 75, - "name": "Graveler", - "types": ["Rock", "Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/075.png?raw=true" - }, - { - "number": 76, - "name": "Golem", - "types": ["Rock", "Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/076.png?raw=true" - }, - { - "number": 77, - "name": "Ponyta", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/077.png?raw=true" - }, - { - "number": 78, - "name": "Rapidash", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/078.png?raw=true" - }, - { - "number": 79, - "name": "Slowpoke", - "types": ["Water", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/079.png?raw=true" - }, - { - "number": 80, - "name": "Slowbro", - "types": ["Water", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/080.png?raw=true" - }, - { - "number": 81, - "name": "Magnemite", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/081.png?raw=true" - }, - { - "number": 82, - "name": "Magneton", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/082.png?raw=true" - }, - { - "number": 83, - "name": "Farfetch'd", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/083.png?raw=true" - }, - { - "number": 84, - "name": "Doduo", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/084.png?raw=true" - }, - { - "number": 85, - "name": "Dodrio", - "types": ["Normal", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/085.png?raw=true" - }, - { - "number": 86, - "name": "Seel", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/086.png?raw=true" - }, - { - "number": 87, - "name": "Dewgong", - "types": ["Water", "Ice"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/087.png?raw=true" - }, - { - "number": 88, - "name": "Grimer", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/088.png?raw=true" - }, - { - "number": 89, - "name": "Muk", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/089.png?raw=true" - }, - { - "number": 90, - "name": "Shellder", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/090.png?raw=true" - }, - { - "number": 91, - "name": "Cloyster", - "types": ["Water", "Ice"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/091.png?raw=true" - }, - { - "number": 92, - "name": "Gastly", - "types": ["Ghost", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/092.png?raw=true" - }, - { - "number": 93, - "name": "Haunter", - "types": ["Ghost", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/093.png?raw=true" - }, - { - "number": 94, - "name": "Gengar", - "types": ["Ghost", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/094.png?raw=true" - }, - { - "number": 95, - "name": "Onix", - "types": ["Rock"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/095.png?raw=true" - }, - { - "number": 96, - "name": "Drowzee", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/096.png?raw=true" - }, - { - "number": 97, - "name": "Hypno", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/097.png?raw=true" - }, - { - "number": 98, - "name": "Krabby", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/098.png?raw=true" - }, - { - "number": 99, - "name": "Kingler", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/099.png?raw=true" - }, - { - "number": 100, - "name": "Voltorb", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/100.png?raw=true" - }, - { - "number": 101, - "name": "Electrode", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/101.png?raw=true" - }, - { - "number": 102, - "name": "Exeggcute", - "types": ["Grass", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/102.png?raw=true" - }, - { - "number": 103, - "name": "Exeggutor", - "types": ["Grass", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/103.png?raw=true" - }, - { - "number": 104, - "name": "Cubone", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/104.png?raw=true" - }, - { - "number": 105, - "name": "Marowak", - "types": ["Ground"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/105.png?raw=true" - }, - { - "number": 106, - "name": "Hitmonlee", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/106.png?raw=true" - }, - { - "number": 107, - "name": "Hitmonchan", - "types": ["Fighting"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/107.png?raw=true" - }, - { - "number": 108, - "name": "Lickitung", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/108.png?raw=true" - }, - { - "number": 109, - "name": "Koffing", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/109.png?raw=true" - }, - { - "number": 110, - "name": "Weezing", - "types": ["Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/110.png?raw=true" - }, - { - "number": 111, - "name": "Rhyhorn", - "types": ["Ground", "Rock"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/111.png?raw=true" - }, - { - "number": 112, - "name": "Rhydon", - "types": ["Ground", "Rock"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/112.png?raw=true" - }, - { - "number": 113, - "name": "Chansey", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/113.png?raw=true" - }, - { - "number": 114, - "name": "Tangela", - "types": ["Grass"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/114.png?raw=true" - }, - { - "number": 115, - "name": "Kangaskhan", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/115.png?raw=true" - }, - { - "number": 116, - "name": "Horsea", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/116.png?raw=true" - }, - { - "number": 117, - "name": "Seadra", - "types": ["Water", "Poison"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/117.png?raw=true" - }, - { - "number": 118, - "name": "Goldeen", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/118.png?raw=true" - }, - { - "number": 119, - "name": "Seaking", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/119.png?raw=true" - }, - { - "number": 120, - "name": "Staryu", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/120.png?raw=true" - }, - { - "number": 121, - "name": "Starmie", - "types": ["Water", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/121.png?raw=true" - }, - { - "number": 122, - "name": "Mr. Mime", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/122.png?raw=true" - }, - { - "number": 123, - "name": "Scyther", - "types": ["Bug", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/123.png?raw=true" - }, - { - "number": 124, - "name": "Jynx", - "types": ["Ice", "Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/124.png?raw=true" - }, - { - "number": 125, - "name": "Electabuzz", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/125.png?raw=true" - }, - { - "number": 126, - "name": "Magmar", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/126.png?raw=true" - }, - { - "number": 127, - "name": "Pinsir", - "types": ["Bug"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/127.png?raw=true" - }, - { - "number": 128, - "name": "Tauros", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/128.png?raw=true" - }, - { - "number": 129, - "name": "Magikarp", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/129.png?raw=true" - }, - { - "number": 130, - "name": "Gyarados", - "types": ["Water", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/130.png?raw=true" - }, - { - "number": 131, - "name": "Lapras", - "types": ["Water", "Ice"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/131.png?raw=true" - }, - { - "number": 132, - "name": "Ditto", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/132.png?raw=true" - }, - { - "number": 133, - "name": "Eevee", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/133.png?raw=true" - }, - { - "number": 134, - "name": "Vaporeon", - "types": ["Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/134.png?raw=true" - }, - { - "number": 135, - "name": "Jolteon", - "types": ["Electric"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/135.png?raw=true" - }, - { - "number": 136, - "name": "Flareon", - "types": ["Fire"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/136.png?raw=true" - }, - { - "number": 137, - "name": "Porygon", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/137.png?raw=true" - }, - { - "number": 138, - "name": "Omanyte", - "types": ["Rock", "Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/138.png?raw=true" - }, - { - "number": 139, - "name": "Omastar", - "types": ["Rock", "Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/139.png?raw=true" - }, - { - "number": 140, - "name": "Kabuto", - "types": ["Rock", "Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/140.png?raw=true" - }, - { - "number": 141, - "name": "Kabutops", - "types": ["Rock", "Water"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/141.png?raw=true" - }, - { - "number": 142, - "name": "Aerodactyl", - "types": ["Rock", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/142.png?raw=true" - }, - { - "number": 143, - "name": "Snorlax", - "types": ["Normal"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/143.png?raw=true" - }, - { - "number": 144, - "name": "Articuno", - "types": ["Ice", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/144.png?raw=true" - }, - { - "number": 145, - "name": "Zapdos", - "types": ["Electric", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/145.png?raw=true" - }, - { - "number": 146, - "name": "Moltres", - "types": ["Fire", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/146.png?raw=true" - }, - { - "number": 147, - "name": "Dratini", - "types": ["Dragon"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/147.png?raw=true" - }, - { - "number": 148, - "name": "Dragonair", - "types": ["Dragon"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/148.png?raw=true" - }, - { - "number": 149, - "name": "Dragonite", - "types": ["Dragon", "Flying"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/149.png?raw=true" - }, - { - "number": 150, - "name": "Mewtwo", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/150.png?raw=true" - }, - { - "number": 151, - "name": "Mew", - "types": ["Psychic"], - "imageUrl": "https://github.com/HybridShivam/Pokemon/blob/master/assets/images/151.png?raw=true" - } - ] \ No newline at end of file diff --git a/poke-mongo/server/db/index.js b/poke-mongo/server/db/index.js deleted file mode 100644 index 433babf..0000000 --- a/poke-mongo/server/db/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your Database Connection comes here - */ \ No newline at end of file diff --git a/poke-mongo/server/index.js b/poke-mongo/server/index.js deleted file mode 100644 index 66cd61e..0000000 --- a/poke-mongo/server/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your server comes here - */ \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/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" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/route/routes.js b/route/routes.js new file mode 100644 index 0000000..f6b1882 --- /dev/null +++ b/route/routes.js @@ -0,0 +1,14 @@ +import express from 'express'; +import {getProducts, addProduct, getProductById, editProduct, deleteProduct} from '../controllers/product-controller.js'; + + +const router = express.Router(); + +router.get('/', getProducts ); +router.post('/add', addProduct); +router.get('/:id',getProductById); +router.put('/:id', editProduct); +router.delete('/:id', deleteProduct); + + +export default router; \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..74b5e05 --- /dev/null +++ b/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..14d187e --- /dev/null +++ b/src/App.js @@ -0,0 +1,35 @@ + + +import NavBar from './components/NavBar'; +import ProductManagementSystem from './components/ProductManagementSystem'; +import AllProducts from './components/AllProducts'; +import AddProduct from './components/AddProduct'; +import NotFound from './components/NotFound'; +import EditProduct from './components/EditProduct'; +import DeleteProduct from './components/DeleteProduct'; +import {BrowserRouter, Route, Routes } from 'react-router-dom'; + +function App() { + return ( + + + + } /> + } /> + } /> + } > + }/> + + } > + }/> + + } /> + + + + + + ); +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/Assets/images/hello.jpg b/src/Assets/images/hello.jpg new file mode 100644 index 0000000..d559dda Binary files /dev/null and b/src/Assets/images/hello.jpg differ diff --git a/src/Assets/images/notfound.jpg b/src/Assets/images/notfound.jpg new file mode 100644 index 0000000..8dd4fee Binary files /dev/null and b/src/Assets/images/notfound.jpg differ diff --git a/src/Assets/images/store.jpg b/src/Assets/images/store.jpg new file mode 100644 index 0000000..90b1882 Binary files /dev/null and b/src/Assets/images/store.jpg differ diff --git a/src/Database/db.json b/src/Database/db.json new file mode 100644 index 0000000..63cfa9e --- /dev/null +++ b/src/Database/db.json @@ -0,0 +1,20 @@ +{ + "products": [ + { + "name": "Cream Foundation", + "category": "Makeup", + "brand": "Revolution", + "price": "39.900TND", + "quantity": "10", + "id": 1 + }, + { + "name": "lipstick", + "category": "makeup", + "brand": "Forever", + "price": "49.000TND", + "quantity": "14", + "id": 2 + } + ] +} \ No newline at end of file diff --git a/src/components/AddProduct.jsx b/src/components/AddProduct.jsx new file mode 100644 index 0000000..5a7612f --- /dev/null +++ b/src/components/AddProduct.jsx @@ -0,0 +1,75 @@ +import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core'; +import react, { useState } from 'react'; +import { addProduct } from '../service/api'; +import { useNavigate} from 'react-router-dom'; + +const useStyle = makeStyles({ + container: { + width: '50%', + margin: '5% 0 0 25%', + '& > *': { + marginTop: 20 + } + } +}) + +const initialValue ={ + name: '' , + category: '', + brand: '', + price: '' , + quantity: '' + + } + +const AddProduct= () => { + const [product, setProduct] = useState(initialValue); + const { name, category, brand, price, quantity } = product; + const classes = useStyle(); + const navigate = useNavigate(); + + const onValueChange = (e) => { + console.log(e.target.value); + setProduct({...product, [e.target.name]: e.target.value}) + } + + const addProductDetails = async() => { + await addProduct(product); + navigate('/all'); + + } + + + return ( + + Add Product + + Name + onValueChange(e)} name='name' value={name} id="my-input" /> + + + Category + onValueChange(e)} name='category' value={category} id="my-input" /> + + + Brand + onValueChange(e)} name='brand' value={brand} id="my-input"/> + + + Price + onValueChange(e)} name='price' value={price} id="my-input" /> + + + Quantity + onValueChange(e)} name='quantity' value={quantity} id="my-input" /> + + + + + + + + ) +} + +export default AddProduct; \ No newline at end of file diff --git a/src/components/AllProducts.jsx b/src/components/AllProducts.jsx new file mode 100644 index 0000000..c2f5200 --- /dev/null +++ b/src/components/AllProducts.jsx @@ -0,0 +1,83 @@ +import { TableBody, TableCell, TableHead, Table, TableRow, makeStyles, Button } from "@material-ui/core"; +import { useEffect, useState } from "react"; +import { getProducts } from "../service/api"; +import { Link } from 'react-router-dom'; + +const useStyle = makeStyles ({ + table: { + width: '90%', + margin: '50px 0 0 50px' + }, + thead: { + '& > *': { + background: '#000000', + color: '#FFFFFF', + fontSize: 20 + } + }, + row: { + '& > *': { + fontSize: 18 + } + } +}) + +const AllProducts = () => { + + const [products, setProduct] = useState([]); + const classes = useStyle(); + + useEffect(() => { + getAllProducts(); + }, []) + + + + const getAllProducts = async () => { + const response = await getProducts(); + console.log(response.data); + setProduct(response.data); + } + + //const deleteProductData = async (id) => { + // await deleteProduct(id); + // getAllProducts(); + // } + + + return ( + + + + Id + Name + Category + Brand + Price + Quantity + + + + + { + products.map(product => ( + + {product._id} + {product.name} + {product.category} + {product.brand} + {product.price} + {product.quantity} + + + + + + )) + } + +
+ ); +} + +export default AllProducts; \ No newline at end of file diff --git a/src/components/DeleteProduct.jsx b/src/components/DeleteProduct.jsx new file mode 100644 index 0000000..87de43c --- /dev/null +++ b/src/components/DeleteProduct.jsx @@ -0,0 +1,91 @@ +import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core'; +import react, { useState, useEffect } from 'react'; +import { deleteProduct, getProducts } from '../service/api'; +import { useNavigate, useParams } from 'react-router-dom'; +import { Link } from 'react-router-dom'; + + +const useStyle = makeStyles({ + container: { + width: '50%', + margin: '5% 0 0 25%', + '& > *': { + marginTop: 20 + } + } +}) + +const initialValue ={ + name: '' , + category: '', + brand: '', + price: '' , + quantity: '' + + } + +const DeleteProduct= () => { + const [product, setProduct] = useState(initialValue); + const { name, category, brand, price, quantity } = product; + const { id } = useParams(); + const classes = useStyle(); + const navigate = useNavigate(); + + + useEffect(() => { + loadProductData(); + }, []); + + const loadProductData = async() => { + const response = await getProducts(id); + setProduct(response.data); + } + + + const onValueChange = (e) => { + console.log(e.target.value); + setProduct({...product, [e.target.name]: e.target.value}) + } + + const deleteProductData = async () => { + await deleteProduct(id, product); + + navigate('/all'); + } + + + + return ( + + Delete Product + + Name + onValueChange(e)} name='name' value={name} id="my-input" /> + + + Category + onValueChange(e)} name='category' value={category} id="my-input" /> + + + Brand + onValueChange(e)} name='brand' value={brand} id="my-input"/> + + + Price + onValueChange(e)} name='price' value={price} id="my-input" /> + + + Quantity + onValueChange(e)} name='quantity' value={quantity} id="my-input" /> + + + + + + + + + ) +} + +export default DeleteProduct; \ No newline at end of file diff --git a/src/components/EditProduct.jsx b/src/components/EditProduct.jsx new file mode 100644 index 0000000..28fe395 --- /dev/null +++ b/src/components/EditProduct.jsx @@ -0,0 +1,90 @@ +import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core'; +import react, { useState, useEffect } from 'react'; +import { editProduct, getProducts } from '../service/api'; +import { useNavigate, useParams } from 'react-router-dom'; +import { Link } from 'react-router-dom'; + + +const useStyle = makeStyles({ + container: { + width: '50%', + margin: '5% 0 0 25%', + '& > *': { + marginTop: 20 + } + } +}) + +const initialValue ={ + name: '' , + category: '', + brand: '', + price: '' , + quantity: '' + + } + +const EditProduct= () => { + const [product, setProduct] = useState(initialValue); + const { name, category, brand, price, quantity } = product; + const { id } = useParams(); + const classes = useStyle(); + const navigate = useNavigate(); + + + useEffect(() => { + loadProductData(); + }, []); + + const loadProductData = async() => { + const response = await getProducts(id); + setProduct(response.data); + } + + + const onValueChange = (e) => { + console.log(e.target.value); + setProduct({...product, [e.target.name]: e.target.value}) + } + + const editProductDetails = async() => { + await editProduct(id, product); + navigate('/all'); + + } + + + return ( + + Edit Information + + Name + onValueChange(e)} name='name' value={name} id="my-input" /> + + + Category + onValueChange(e)} name='category' value={category} id="my-input" /> + + + Brand + onValueChange(e)} name='brand' value={brand} id="my-input"/> + + + Price + onValueChange(e)} name='price' value={price} id="my-input" /> + + + Quantity + onValueChange(e)} name='quantity' value={quantity} id="my-input" /> + + + + + + + + + ) +} + +export default EditProduct; \ No newline at end of file diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..eba998f --- /dev/null +++ b/src/components/NavBar.jsx @@ -0,0 +1,32 @@ +import { AppBar, Toolbar, Typography, makeStyles} from '@material-ui/core'; +import { NavLink } from 'react-router-dom'; + +const useStyle = makeStyles({ + header: { + background: '#111111' + }, + tabs: { + color: '#FFFFFF', + textDecoration: 'none', + marginRight: 20, + fontSize: 20 + } +}) +const NavBar = () => { + const classes = useStyle(); + return ( + + + Product Management System + All Products + Add Product + + + + + + ) +} + + +export default NavBar; \ No newline at end of file diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx new file mode 100644 index 0000000..edc8f12 --- /dev/null +++ b/src/components/NotFound.jsx @@ -0,0 +1,11 @@ + +import notfound from '../Assets/images/notfound.jpg' + +const NotFound =() => { + return ( + + ) + + +} +export default NotFound; \ No newline at end of file diff --git a/src/components/ProductManagementSystem.jsx b/src/components/ProductManagementSystem.jsx new file mode 100644 index 0000000..db2435d --- /dev/null +++ b/src/components/ProductManagementSystem.jsx @@ -0,0 +1,10 @@ +import hello from '../Assets/images/hello.jpg'; + +const ProductManagementSystem = () => { + return ( + + + ) +} + +export default ProductManagementSystem; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..ef2edf8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/service/api.js b/src/service/api.js new file mode 100644 index 0000000..b4802f9 --- /dev/null +++ b/src/service/api.js @@ -0,0 +1,23 @@ +import axios from 'axios'; + + +const url ='http://localhost:8000/products'; + +export const getProducts = async(id) => { + id = id || ''; + return await axios.get(`${url}/${id}`); +} + +export const addProduct = async(product) => { + return await axios.post(`${url}/add`,product); +} + + +export const editProduct = async (id, product) => { + return await axios.put(`${url}/${id}`, product) +} + + +export const deleteProduct = async (id, product) => { + return await axios.delete(`${url}/${id}`, product); +} \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/task-management/README.md b/task-management/README.md deleted file mode 100644 index 4bccf49..0000000 --- a/task-management/README.md +++ /dev/null @@ -1,109 +0,0 @@ -# Task Management System - -You will be creating a full-stack application to manage and organize tasks like [Trello](https://trello.com/). It will allow the user to execute all CRUD operations on his tasks,. 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/). - -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. - -### Part 1 - Paintings Gallery - -1. **As a user**, I want to be able to view the tasks I have in my app. If no paintings are present in the database, I will have to see a message indicating that `You have no tasks` and a button to create new ones. - -To implement this user story, you should: - -- Write an ExpressJS web server that listens to request on port `8000`. -- Run this command to create 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 Task Schema under `server/models/Task.js`. It should have these following attributes: - - `id`: Number - - `title`: String - - `deadline`: [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) - - `isCompleted`: Boolean _(`true` if completed, `false` if not )_ -- Complete the route `/api/tasks` in `server/routes/tasks.routes.js` so that requests to this route are responded to with the data for all the tasks, 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 task in a `Card` containing the image, the title, the deadline, and the status (`completed` / `in progress`). -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 1 Complete`** - -### Part 2 - Create new Tasks - -1. **As a user**, I want to be able to create new Tasks and save them in the database. Create a `NewTask` component containing these inputs: - -- `Title`: text -- `Deadline`: date - -The data from the form should be sent to `/api/tasks` and saved to the database. - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 2 Complete`** - -### Part 3 - Edit Existing Tasks - -1. **As a user**, I want to update the titles of existing tasks in my management system. - -- With every Task Card, there should be an `Edit` button. -- When the user clicks on `Edit`, the title becomes an editable input with 2 buttons (`save` / `cancel`) -- The input should be **prefilled** with the title of the selected task -- The user can click on `Cancel` to cancel changes -- The user can update the data and click on `save` -- You should send a PUT request to `/api/tasks/:id` -- The editable input and the buttons should disappear - -2. **As a user**, I want to mark tasks as done. - -- With every Task Card, there should be an `check` button. -- When the user clicks on the `check` button, the status of the button should become `done` -- You should send a PUT request to `/api/tasks/:id/complete` - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`** - -### Part 3 - Overdued Tasks - -1. **As a user**, I want to know which of my tasks are overdue - -- With every Task Card, there should be `Badge`. -- This Badge should only appear when the task deadline is overdue - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** - -### Part 4 - Delete Tasks - -1. **As a user**, I want to be able to delete existing tasks from the database - -- Each task 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 task and close the modal -- The task will no longuer exist in the `TasksList` component - -- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** - -### API Structure - -> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section - -Using the existing code provided in `server/`, follow the steps below to build out a Paintings API: - -| URL | HTTP Verb | Request Body | Result | -| :---------------------: | :-------: | :----------: | :--------------------------------------------------------------------------: | -| /api/tasks | GET | empty | Return JSON of all tasks | -| /api/tasks | POST | JSON | Create new Task and return JSON of created Task | -| /api/tasks/:id | DELETE | empty | Return JSON of single Task with matching `id` | -| /api/tasks/:id/complete | PUT | empty | Update Task isCompleted to `true` with matching `id` | -| /api/tasks/:id | PUT | JSON | Update Task isCompleted to `true` with matching `id` and return updated Task | - -## Available Resources - -- [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/) -- [Postman](https://www.getpostman.com/) -- Docs for any npm packages you might use diff --git a/task-management/dummy_data.js b/task-management/dummy_data.js deleted file mode 100644 index ff3139c..0000000 --- a/task-management/dummy_data.js +++ /dev/null @@ -1,26 +0,0 @@ -module.exports = [ - { - 'id': 1234, - 'title': 'Prepare Business Model', - 'deadline': 01-12-2021, - 'isCompleted': true - }, - { - 'id': 3748, - 'title': 'Pitch to Venture Capitals', - 'deadline': 12-01-2022, - 'isCompleted': false - }, - { - 'id': 3840, - 'title': 'Prepare Prototype', - 'deadline': 31-12-2021, - 'isCompleted': false - }, - { - 'id': 1234, - 'title': 'Launch a Sales Campaign', - 'deadline': 20-02-2021, - 'isCompleted': false - }, - ]; \ No newline at end of file diff --git a/task-management/server/db/index.js b/task-management/server/db/index.js deleted file mode 100644 index 05aaea5..0000000 --- a/task-management/server/db/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Connect to the Database with Mongoose here - */ \ No newline at end of file diff --git a/task-management/server/index.js b/task-management/server/index.js deleted file mode 100644 index 66cd61e..0000000 --- a/task-management/server/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Your server comes here - */ \ No newline at end of file