- read

Top 10 PET projects for junior javascript developers

Oleksii Vasylenko 66

Programming is a practice. You can not learn programming just reading manuals or memorising interview questions. I put 9 projects to-do to learn and practice programming and architecture.

Github Explorer

Basic Idea: Create website where

  • user can enter username and see public repositories of user.
  • user can click on repository and see readme.md and programming language of repository

Make it more complex:

  • Save last 10 seen repositories/users and allow user to navigate to it

Api:

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • node
  • firebase
  • d3 for colors on charts

Tabata Timer

Basic Idea: Create basic Tabata timer where

  • user can create new program n cycles with m seconds and some rest
  • user can save program and loaded saved programs
  • user can start program
  • when program starts or stops some sound should play

Make it more complex:

  • Add exercise descriptions for every program
  • Allow to add schedule for exercises. F.e. every 4 hours from 8 am to 8 pm should notify user 10–5min prior training

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • node
  • firebase

Etherium explorer

Basic Idea: Create basic Etherium explorer to explore network

  • user can see last 10 blocks and list of transactions
  • user can navigate to specific block and see all details of block with list of transactions
  • user can see list details of any specific transaction

Make it more complex:

  • Allow user to save to his list specific blocks /transaction
  • Show graph of prev 10 blocks for any block

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • metamask
  • web3

Wallet with currency conversion

Basic Idea: Create basic wallet for currency conversion

  • user can see 4 currency USD / CAD / AUD / SGD / CHF / EUR in his wallet
  • user can convert one currency to another
  • user can add new value to any currency
  • user can see history of his transactions description / date. Bear in mind timezones.

Make it more complex:

  • Use real currency API / not hardcoded values
  • Add authorization and allow o send currencies between users. Demonstrate knowledge about transact operations
  • Send notification to user who receives currencies

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • express
  • PostgreSQL / typeorm

Social network

Basic Idea: Create social network where

  • user can login as user or as admin
  • user can add other users ad a friends
  • user can publish publish posts or only for friends
  • user can send private message to another user
  • user can add comment for the post
  • user can remove private message
  • admin may remove any post

Make it more complex:

  • admin may see users online
  • admin may send ban user for login for 1 day/5 days/ month

Api:

  • -

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • express
  • PostgreSQL / typeorm or mongodb/mongoose

Tinder for Ducks

Basic Idea: Create tinder for ducks

  • user can upload 5 photos and description of duck
  • user can swipe right if like animal or swipe left if do not like
  • user can see everyone who swiped his animal right
  • user can send messages as a in tinder
  • user can unswipe swiped ducks

Make it more complex:

  • add preview mode where you can swipe all mutuals swipes to see pictures
  • add facebook / telegram login
  • add grid where you may reorder photos with drag-and-drop

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • PostgreSQL / typeorm or mongodb/mongoose
  • express
  • socket.io

Sea battle

Basic Idea: Create sea battle game

  • user can generate random link for a game and send it to the friend
  • user can press start when he and his friend are ready
  • user can put warships on the field. 1–4square, 2 — 3 square, 3–2 square, 4 -1 square ships
  • user can choose 1 square to check is there is a enemy ship . If ship sank show all squares around fullfiles

Make it more complex:

  • add super-weapon — which fires 2x2 square 1 time per game
  • add statistics
  • add authorization with facebook
  • add main screen where. you may see all open games and last games

Api:

Technologies:

  • react / react-native
  • contexts api
  • axios
  • tailwindcss
  • express
  • socket.io

Chatbot to parse Amazon

Basic Idea: Create telegram bot which notifies you about price change of specific good

  • user can add link to amazon page in bot
  • user gets notification if price have been changed at least in 1 hour after change
  • user can see all links he is following
  • user can remove link to follow

Make it more complex:

  • create rabbitmq queue to divide parsing load between different services

Api:

Technologies:

  • tailwindcss
  • express
  • socket.io
  • puppeter
  • rabbitmq
  • redis
  • mongodb / postgress