Skip to content

HackYourFuture-CPH/FP-annotatetheweb-class10

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Project logo

Final Project for Class 10 - Annotate the Web


πŸ“ Table of Contents

🧐 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

AWS S3 logo

πŸ“ˆ 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

GitHub logo Working with GIT

Working with GIT

Heroku logo Working with Heroku and Deployment

Working with Heroku and Deployment

Knex logo Working with Knex and Migrations

Working Knex and migrations

Swagger logo 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.

Storybook logo 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/

AWS S3 logoAWS S3 logo 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

πŸ‘¨πŸΎβ€πŸ’» Authors

Other contributions

πŸ“ License

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

About

Final Project for Class10 - Annotatetheweb.com

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published