Skip to content

WebApp consisting of a REST-like API (back-end) and a React SPA (front-end). This WebApp is an online IDLE Game, based in Liège.

Notifications You must be signed in to change notification settings

lilouMazzarisi/Planty_Becode

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

LeafApp project

banner idle game planty

React logo Tailwind logo Express logo Node.js logo MongoDB logo

The idea for the project has been elaborate by the BeCode.org training.

🌱 Project description

Planty is a MERN (Mongo, Express, React, Node.js) stack Web Application. It's an IDLE based in Liège/Luik. The purpose is to collect trees existing in the city and become the biggest owner on the map by buying and locking every trees available. The player receives a wallet with leafs(the game money) at the beginning and this wallet decreases and increase throughout the game. More explanation in the walkthrough .

Table of content

1. Techs used
2. Walkthrough of the game
3. How to run the project
4. The Project Team
5. Credits

🚧 Techs and NPM Modules

🎨 FrontEnd :

React

Vite

NPM Modules and others :
  • axios (request)
  • leaflet (map)
  • react-leaflet-cluster (cluster)
  • lottie-react (logo)
  • react-icon (icon)
  • react-router-dom (route)
  • radial-color-picker (color picker)
  • swiper (swipe in user profil)
  • eslint (to find quickly problems in the code)
  • prettier (code formatter)
  • tailwindcss (style)

⛓️ BackEnd :

Node.js

MongoDB

NPM Modules and framework :
  • bcrypt (hash the password)
  • cors (allows restricted source on the webpage)
  • dotenv (read the .env)
  • jwt-decode (json token)
  • jsonwebtoken (json token)
  • mongoose (connect to MongoDB)
  • morgan (Error testing logs)
  • node-cron (Programs specific action)
  • nodemon (Reloading the server)
  • project-name-generator (Generate random name)
  • validator (Check the authentication fields)

🚶 Walkthrough

Preview signup form : fields

Preview signup form : fields Preview signup form : color pick

First, to start off the game the player have an account. To create an account, it requires :

  • an username
  • an email account
  • a secure password
  • an unique hexadecimal color from the color picker(each player has a color in the game).

Preview of the map Preview of buy action on the map

As the player logs in, he arrives on the map. He can wander around to buy tree and check which tree are available or already owned. He can also check the details of the tree, which we will see as well on the profile below.

Preview of the user's profile Preview of the trees details

  • On his profile, the player can check the trees he possesses, modify his personal info and log out.
  • On the tree detailed pages, you can see its personal name (random at the DB creation), its owner, its species, the actual value, the wikipedia page of its species. You can lock the tree to prevent another player to buy it and sell the tree.
  • On the tree page, players can post comments and interact with the community.

For more precision on the game mechanics here the Backend repository.

Preview of leaderboard

Finally, you can check the scores status of all the players in the leaderboard, to know it you are a good conqueror.

⏳ How to run the project

Git clone the project ✔️

Run in your terminal :

git@github.com:krabandicoot/Planty_Becode.git

Run the Frontend part ✔️

Open in a new terminal

cd app/client && npm i --force

Once the depencies are installed run :

npm run build && npm run dev

Run the Backend part ✔️

Open in a new terminal

cd app/server && npm i

Once the depencies are installed run :

npm run start

To understand how to modify the .envand create your DB of trees check out this link.

See the project ✔️

Once the server run, check the locahost your receive with vite on the client terminal to access the webApp.

🤝 Team

🦾 Credits

Database from Belgium OpenData Initiative website

The logo was made by Sheikh Sohel

Design comes from Freepik and have been modified for our color palette.

Special thanks to Luna Muylkens | GitHub | For helping us debugging and optimize for the deployment.

About

WebApp consisting of a REST-like API (back-end) and a React SPA (front-end). This WebApp is an online IDLE Game, based in Liège.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.7%
  • CSS 6.7%
  • Other 0.6%