We have 30 chemical compounds with you and their details. Details Include:

1. Name
2. Image
3. Description

A webapp for where anyone can directly look into the compounds and its details. Editing of details also possible in case someone wants to change the information.

Backend - Node.js, Express, Sequelize, MySQL.

Frontend - Angular CLI 16.0.0, HTML, CSS.

1. Make a card view with all the compound names and their images as separate cards.
2. Use Pagination.
3. (Use Routing) On click of each card change the route to a page to display the relevant compound details.

1. Make CRUD API to access/edit Compound list and details.
2. Make db table to access/store the given data (data provided in csv format from easy Import).

1. Clone the repository to your local machine.
2. Create a MySQL database and make a table named 'compounds' with query - CREATE TABLE compounds (id INT, compoundName TEXT, compoundDescription TEXT, imageSource TEXT, imageAttribution TEXT, dateModified DATE);
3. Update the dgconfig.js file in /backend_node/configs and also upload the csv file which was provided to the created table.
4. Navigate to the backend_node directory and run npm install to install ExpressJS and Sequelize dependencies.
5. Navigate to the frontend directory and run npm install to install Angular dependencies.
6. Start the Express server using nodemon server.js and Angular app using the script npm start.
7. The proxy.conf.json file in frontend directory makes the angular app make its api calls to port no. 8080 and therefore integrates the backend with frontend running on port no. 4200.

There are currently 5 API calls in this app-

1. GET /api/compound: Retrieve all compounds with pagination.
2. GET /api/compound/:id: Get compound by ID.
3. POST /api/compound/: Add a new compound.
4. PUT /api/compound/:id: Update details of a compound with a specific ID.
5. DELETE /api/compound/:id: Delete a compound with a specific ID.