https://github.com/lironmiz/connect-the-dots
A site for creating a dot line game when the user enters a picture and it creates a dot line game for him for coding hackathon.
https://github.com/lironmiz/connect-the-dots
bootstrap5 coding-hackathons css3 database dots-game edge-detection fullstack-development github-pages html5 image-processing javascript k-means-clustering learning-by-doing nodejs problem-solving project responsive-web-design sqlite3 teamwork website-development
Last synced: 4 months ago
JSON representation
A site for creating a dot line game when the user enters a picture and it creates a dot line game for him for coding hackathon.
- Host: GitHub
- URL: https://github.com/lironmiz/connect-the-dots
- Owner: lironmiz
- Created: 2023-01-31T08:54:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T09:20:24.000Z (over 2 years ago)
- Last Synced: 2025-03-15T07:06:15.708Z (7 months ago)
- Topics: bootstrap5, coding-hackathons, css3, database, dots-game, edge-detection, fullstack-development, github-pages, html5, image-processing, javascript, k-means-clustering, learning-by-doing, nodejs, problem-solving, project, responsive-web-design, sqlite3, teamwork, website-development
- Language: JavaScript
- Homepage:
- Size: 2.69 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
👾 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](https://docs.google.com/document/d/1xzy8paq7EBBskn_GaemU54gSpc9PtrlC6QMFPCwp6P8/edit?usp=sharing) (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
```
### :robot: Tech Stack
## :toolbox: Getting Started
### :gear: Installation
#### Step 1:
Download or clone this repo by using the link below:
```bash
https://github.com/lironmiz/connect-the-dots.git
```
#### Step 2:
make sure that Node.js is installed by execute the following command in console:
```bash
node -v
```
### :running: Run Locally
#### Step 1:
Use npm install to download the required dependencies:
```bash
npm install ...
```
#### Step 2:
At the main folder execute the following command in console to run the server:
```bash
npx ts-node Server/src/server.ts
```
## :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!
## :video_camera: Video Of The Project
https://user-images.githubusercontent.com/91504420/222888487-14944014-fe49-44d3-a459-26ab7580b67e.mp4
## :framed_picture: Screenshots
## :telephone: About the authors
- Alon Regev - A soldier in a technological unit in the army
- Liron Mizarhi - Navy soldier and programmer
## :octocat: Project Status
### Project is: Done!