connect-the-dots

👾 connect-the-dots 👾

A website for creating a dot line game when the user enters a picture and it creates a dot line game for him with cool features and image processing for coding hackathon 🥳.

# :notebook_with_decorative_cover: Table of Contents

- [About the Project](#star2-about-the-project) * [Folder Structure](#bangbang-folder-structure) * [Tech Stack](#robot-tech-stack) - [Getting Started](#toolbox-getting-started) * [Installation](#gear-installation) * [Run Locally](#running-run-locally) - [Video Of The Project](#video_camera-video-of-the-project) - [Features](#muscle-features) - [ScreenShots](#framed_picture-screenshots) - [About the authors](#telephone-about-the-authors) - [Project Status](#octocat-project-status)

:star2: About the Project

This repository houses an stunning Responsive Website that make a connect the dot game from given image 🤯.

Our mission is to bring you back to childhood!

for more information you can see the project documentation we did at the link below and also look at the project video!

• Planning Document (docs)

:bangbang: Folder Structure

Here is the folder structure of the website

connect-the-dots/
|- Front/
  |-- assets/
    |-- img/
      |-- about/
        |-- 1.jpg
        |-- 2.jpg
        |-- 3.jpg
        |-- 4.jpg
      |-- team/
        |-- alon.jpg
        |-- liron.jpg
      |-- close-icon.svg
      |-- convert-header-bg.jpg
      |-- gallery-bg.jpg
      |-- header-bg.jpg
    |-- favicon.ico
  |-- css/
    styles.css
  |-- js/
    |-- filters..js
    |-- gallery.js
    |-- imageProcessing.js
    |-- main.js
    |-- pathProcessing.js
    |-- scripts.js
  |-- convert.html
  |-- gallery.html
  |-- index.html
  |-- package-lock.json
|-- Server/
  |-- src/
    |-- DatabaseInterface.ts
    |-- Server.ts
|-- README.md
  |-- Package-lock.json
  |-- package.json
|-- gitignore  

(back to top)

:robot: Tech Stack

(back to top)

:toolbox: Getting Started

:gear: Installation

Step 1:

Download or clone this repo by using the link below:

 https://github.com/lironmiz/connect-the-dots.git

Step 2:

make sure that Node.js is installed by execute the following command in console:

  node -v

:running: Run Locally

Step 1:

Use npm install to download the required dependencies:

  npm install ...

Step 2:

At the main folder execute the following command in console to run the server:

  npx ts-node Server/src/server.ts

(back to top)

:muscle: Features

• Turning a picture into a dot line game
• Option to print the image or download it
• Manual background removal
• Possibility to create the game as several objects in the picture
• Gallery to display all games
• Option to sort the games by category int the gallery
• Support for all image file types
• Option to uplode image from API that give you cute pictures of dogs!

(back to top)

:video_camera: Video Of The Project

https://user-images.githubusercontent.com/91504420/222888487-14944014-fe49-44d3-a459-26ab7580b67e.mp4

(back to top)

:framed_picture: Screenshots

(back to top)

:telephone: About the authors

• Alon Regev - A soldier in a technological unit in the army

• Liron Mizarhi - Navy soldier and programmer

(back to top)

:octocat: Project Status

Project is: Done!

(back to top)