Final Project for Class 10 - Annotate the Web

📝 Table of Contents

• About
• Project's Calendar
• Class Daily Agenda
• The Customer
  • Business Glossary
  • Database Model Diagram
• Process
  • Working with code
  • Code best practices
  • Working with GIT
  • Working with Heroku and Deployment
  • Working Knex and migrations
  • Working with API Documentation - Swagger
  • Working with Storybook
  • Working with AWS - Amazon Services
• Getting Started
  • Installations
• Getting the certificate
• Authors
• License

🧐 About

Main repository for the final project for Class 10

⛏️ Built Using

• React - Web Framework
• NodeJs - Server Environment
• MySQL - Database
• Express - Server Framework - Server and Client side structure
• Knex - Database management
• Swagger - API Documentation
• Storybook - Tool for developing UI components in isolation
• Prettier - Code formatter

📅 Project's Calendar

The Final Project runs on these dates:

Class Dates - Classes are held on Hack Your Future

Week01 - 24/11
Week02 - 01/12
Week03 - 08/12
Week04 - 15/12
Holidays - 22/12
Holidays - 29/12
Week05 - 05/01
Week06 - 12/01
Week07 - 19/01
Week08 - 26/01 (graduation)

Study groups dates - Studygroups are held on CodeArt

5 sessions from 10:00 to 15:00 at Teknikerbyen 5, Virum

Week01 - 26/11
Week02 - 10/12
Week03 - 17/12
Week04 - 14/01
Week05 - 21/01

At least @Allan and/or @Kseniia will be there with you guys.

🕛 Class Daily Agenda 🕓

• 12:00 - 13:30 - ...
• 13:30 - 14:00 - ...
• 14:00 - 14:30 - Lunch
• 14:30 - 16:00 - ...

👩🏻‍💼💡👨🏽‍💼 The Customer

This Final Project is made in collaboration with CodeArt. @Allan and @Kseniia work there and they will help us during this project.

The goal of this project is to replicate this website https://www.annotatetheweb.com/ See the initial inspiration slidedeck about the background for the project: HERE

💼 Business Glossary

Add here information about the Business Glossary Business Glossary

🗄️ Database Model Diagram

Check here the DB Diagram https://dbdiagram.io/d/5ddd225aedf08a25543e6302

• How to make changes on the diagram

📈 Process 📉📈

💻 Working with code

• ALWAYS run code before a PR is made.
• No committing console.log
• No committing merge conflicts!
• Work in separate files! When you make a new feature, the first thing you do is create a new file for that (of course if it makes sense). Especially for components.

👍🏽 Code best practices

Follow these best practices for coding: HERE

This can be used as a checklist for every PR you make. Go through the list and see if you have used all the best practices

Working with GIT

Working with GIT

Working with Heroku and Deployment

Working with Heroku and Deployment

Working with Knex and Migrations

Working Knex and migrations

Working with API Documentation - Swagger

When running the API, you will automatically be running the API Documentation which is based on Swagger. Just go to localhost:3000/api/documentation to read the specifications for the API.

You can use your api token to authorize in Swagger and you will be able to perform test calls against the API directly from Swagger.

If you need to make changes to the specification, this can be done via the Swagger.json file.

Working with Storybook

Tool for developing UI components in isolation

Here is how to get started with storybook:

npm run storybook

For more information, Check here https://storybook.js.org/

Working with AWS - Amazon Services

AWS is used for uploading files on a AWS S3 bucket. There is a user on the AWS that has AmazonS3FullAccess. There is not a AWS root key, but ONLY a key and a secret key for the AWS user.

If you need the key and secret to put into the .env file, write to the project manager of the project.

REMEMBER, this key should be kept super secret!!! NEVER add this to any PR!!

🏁 Getting Started

First clone the repo on your local machine using a terminal or a git client.

💾 Installations

Screenshot service

A webservice has been set up that can take screenshots of a given url. The screenshot will be placed in an Azure blob storage and you'll receive a url to it. See the swagger documentation: HERE. The idea is that first you call RequestScreenshot with the url (and potentially screen width to take a screenshot in). In return you get json with a unique key. You can now check using the CheckScreenshot service with the provided key. When the screenshot is ready you'll receive a url to the screenshot image, otherwise you will receive json with an error indicating it's not ready yet. Be aware, that the screenshot service still has a few problems with some websites - especially those that load content dynamically based on javascript events (like hackyourfuture.dk) so don't expect perfect results from the start. There is also a method for future use, that will take raw html to render and get a screenshot from that.

Design

UI Design can be found HERE

📜 Getting the HackYourFuture certificate

👨🏾‍💻 Authors

• Shanawaz Islam

Other contributions

• Benjamin Hughes
• Zaki Wasik
• Filip Malek
• Daniel Fernandes

📝 License

This project is licensed under the MIT License - see the LICENSE.md file for details.