Skip to content

JustBaneIsFine/JustBaneIsFine.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

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

Repository files navigation

Website under construction SVG

Table of contents


  1. Short introduction
  2. Projects

Short Introduction

Who am i


  • Name: Branislav Milosevic (but... Just Bane is fine)
  • Location: Europe -> Serbia -> Novi Sad
  • Age: 25 -- if (currentYear() != '2022'){alert('age is outdated');}
  • Height: about 140cm in working state.. πŸͺ‘ πŸ’»
  • Weight: 7 average watermelons πŸ‰

Skills:

  • Javascript
  • Node.js
  • Express
  • MongoDB
  • HTML/CSS
  • Git

**Curently learning: **

  • Next.js
  • Sass
  • React
  • Typescript

About my projects


Projects are split into 3 levels (easy to hard)

  • Level 1: introduction to javascript, the basics.

  • Level 2: diving deeper into javascript.

  • Level 3: Creating more complex apps with javascript and minimal ui/ux

  • Level 4: Combining everything to create advanced fullstack projects, fullstack live websites/apps

Current progress and plans


  • Level 1 and level 2 projects------Progress 90
  • Improve github page------Progress 70
  • Web scraper project------Progress 100
  • Refactor all projects------Progress 20
  • Plan out and create 1 additional project for level 3------Progress 15
  • Implement Sass, Next.js for at least one of the projects------Progress 0
  • Create a reactNative project------Progress 0
  • Working on Job Hunt website is delayed (Priority goes to other projects)------Progress 25

Contact

Projects


These are my projects from easiest to hardest. Click on a project to open it, or go to my page at JustBaneIsFine.github.io

Level 1


Level 2


Level 3


Level 4


Web Scraper


About the scraper


Scrapes used car websites for cars of chosen make/model/year. Returns organized and sorted data.

Currently only two websites:

Features:

  • Can be sorted in many ways
  • Last search is stored in the browsers local storage
  • Can be exported to a txt file
  • Can be exported to google sheets
  • Working links

How it works

Only a simple TLDR version:


  • step 1: Fetching and validation

Make/model/year are all fetched from the website upon input confirmation. We validate the inputs and send the car data to the server..


  • step 2: Data availability

Now we check if there is data available. If yes, we get the number of pages, and prepare for data gathering


  • step 3: Data gathering

Data is collected from every page and sent back to the front-end


  • step 4: Sort and display

Data is now displayed and available for the user to sort/export or view


Prerequisites

Everything you need in order for the scraper to work:

  • npm
  • Node.js
  • Puppeteer, express, cheerio, etc. will be added automatically

Usage

Now you select the websites, and wait for the data to be fetched. Wait, select, confirm, and repeat.. That's it. After this you will wait a bit longer for data to be collected and displayed.

Usually it takes up to 2 minutes, if it takes more than that, you either have a lot of data, or something is not working properly..

Some errors are expected and not code breaking, so as long as something is happening in the terminal, that's a good sign..

If you see any errors, please let me know and i will try to fix it ASAP.. Or you can contribute, that would be very appreciated

Exporting to txt file..

  • In order to export the data to txt, all you need to do is uncomment two lines of code in the handleData.js.
  • And add the path where you want the file to be created (inside the writeToFile.js file)
// handleData.js file
import {writeToFile} from './writeToFile.js'
writeToFile(content)

Exporting to google spreadsheet

  • Uncomment these two lines in the handleData.js file
import {exportDataToSpreadsheet} from './exportToSpreadSheet.js';
exportDataToSpreadsheet(content);

Issues

IMPORTANT NOTE:

I do not belive that these websites work outside of Europe,Serbia So this may not work if you are outside this area.. Because of that, i have created a short video demonstration of the scraper in action

I had to do a TON of troubleshooting and messing around in order to get this to work.. There are many failsafe functions that prevent the app from crashing due to predictable errors, slow internet speeds, servers not responding, selectors not showing up, etc. ex. pages will try to load 5 times if something fails, or time expires etc.

Both websites work differently and load differently so it took quite a long time to get all these things working perfectly..

However, things might still go wrong and if you notice something, please let me know and i'll try to fix it ASAP..

At the time of posting this and testing it the max time from data entry to display is about 2 minutes.. That's with a high internet speed and about 10 pages from each website..

Video demonstration

https://youtu.be/JY5E0nMa6LU

Car Scraper


Visit the website

This is a jump from the Web scraper (which didn't focus on ui/ux at all, and just spit out data).

The Car Scraper will be a fully functional live fullstack website, front to back. It is the first bigger project that uses the MERN stack:

  • MognoDB
  • Express.js
  • React
  • Node
  • Typescript
  • Tailwind etc...

Features:

  • This is also the first project that will fully implement user authentication
  • It adds the ability for users to create/edit/delete their own data(cars)
  • To save some cars as favorites
  • To change the way data is displayed and much more..

This is an exciting project because i am combining everything into one and improving my skills along the way

Launch date

I hope by april this will be done. Im currently very bad at predicting the finish times because im still learning And some bugs just eat up a lot of my time which i don't have a lot of.

Job hunt


This will be my second fully working website, which i hope will bring something new to the job marketplace.. I plan on building everything myself, which i hope will teach me a lot.

What it will use (this is subject to change)

  • MongoDB
  • Express
  • Nextjs
  • React- or maybe ReactNative?
  • Typescript
  • (still not sure about the css framework)

This project is delayed for now

  • This is more of a personal project that i plan to build and perfect fully
  • Priority currently goes to other level 4 projects because this project will take a lot of time
  • More information will be added here once this project gets its time

Contributions


Currently only contributing to my own projects, no time for any other work unfortunately