Skip to content

A MERN Stack Application designed to mimic the IPL Auction and fill the user's hearts with fun.

License

Notifications You must be signed in to change notification settings

Coder-Srinivas/Ipl-Auction

Folders and files

NameName
Last commit message
Last commit date

Latest commit

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

Repository files navigation

Ipl-Auction

Website shields.io Codacy Badge PRs Welcome code style: prettier

Ipl-Auction

Hit ⭐ if you like this project

Overview

Tech Stack πŸ‘¨β€πŸ’»

My Inspiration πŸ’‘

YoureMyInspirationBrynnElliottGIF

It began back during my childhood days, the urge to play the IPL Auction depicting real players. I used to team up with my friends and play the auction manually with a pen and paper, with a organizer to keep track. Over the last 1 year, I wondered, can I do anything to make my experience better? So I came up with the idea of building a IPL auction app, based on the MERN stack.

What it does ✨

AndThatsWhatItDoesDigibyteGIF

You can team up with your friends and dive into the fun world of auctioning IPL players. The application is capable of auctioning players belonging to various IPL Teams. The bid timer is reset with each bid and the time slot to buy a player is 10 seconds so be quick. It's a fun application to experience the the real IPL Auction with friends. Simply create an account, gather your friends and jump staright into the auction.

How I built it 🐺

HowItsMadeCuriousGIF

  • React is used on the client side.
  • Node.js is used on the server side.
  • The news is fetched from the RSS feed of Times of India.
  • Puppeteer is used to scrape data from the IPLT20 Website.
  • Socket.io is used to establish a full-duplex connection with the server and the client.
  • HTTP-only cookies are used to store the information of the user on the client side.
  • bcrypt is used to hash the passwords of the user.
  • An auction object is created upon the creation of a new auction which stores the information of current auction.
  • User class stores the information of the user and the players purchased by him/her.
  • node-schedule is used to schedule the scraping process.
  • Mongodb database is used to store the incomming data.

Screenshots πŸ–ΌοΈ

How to play 🎭

TypicalDayPaningningTheRealPaningningGIF

  • Login/Signup using your email address and password
  • Create a new auction
  • Share the generated code with your friends
  • Bid on your favourite players
  • Most important part is to enjoy

Project Structure πŸ’ͺ

.
β”‚   .gitignore
β”‚   app.js
β”‚   package-lock.json
β”‚   package.json
β”‚   README.md
β”‚
β”œβ”€β”€β”€.github
β”‚   └───workflows
β”‚           codeql-analysis.yml
β”‚
β”œβ”€β”€β”€.husky
β”‚       pre-commit
β”‚
β”œβ”€β”€β”€.vscode
β”‚       settings.json
β”‚
β”œβ”€β”€β”€client
β”‚   β”‚   .gitignore
β”‚   β”‚   package-lock.json
β”‚   β”‚   package.json
β”‚   β”‚
β”‚   β”œβ”€β”€β”€public
β”‚   β”‚   β”‚   index.html
β”‚   β”‚   β”‚
β”‚   β”‚   └───Images
β”‚   β”‚           arrow.svg
β”‚   β”‚           error.svg
β”‚   β”‚           logo.png
β”‚   β”‚           profile.jpeg
β”‚   β”‚           Screenshot-1.png
β”‚   β”‚           Screenshot-2.png
β”‚   β”‚           Screenshot-3.png
β”‚   β”‚           Screenshot-4.png
β”‚   β”‚           Screenshot-5.png
β”‚   β”‚           Screenshot-6.png
β”‚   β”‚           Screenshot-7.png
β”‚   β”‚
β”‚   └───src
β”‚       β”‚   App.js
β”‚       β”‚   index.js
β”‚       β”‚
β”‚       β”œβ”€β”€β”€components
β”‚       β”‚       AccordianComponent.js
β”‚       β”‚       Bars.js
β”‚       β”‚       CreateAuction.js
β”‚       β”‚       Error.js
β”‚       β”‚       Form.js
β”‚       β”‚       Game.js
β”‚       β”‚       Input.js
β”‚       β”‚       JoinAuction.js
β”‚       β”‚       Loading.component.js
β”‚       β”‚       Lobby.js
β”‚       β”‚       Navbar.js
β”‚       β”‚       News.js
β”‚       β”‚       NewsCard.js
β”‚       β”‚       NewsContent.js
β”‚       β”‚       NewsDate.js
β”‚       β”‚       NewsDescription.js
β”‚       β”‚       NewsImage.js
β”‚       β”‚       NewsTitle.js
β”‚       β”‚       PlayerCard.js
β”‚       β”‚       PlayerStats.js
β”‚       β”‚       Title.js
β”‚       β”‚       UserAccordian.js
β”‚       β”‚
β”‚       β”œβ”€β”€β”€hooks
β”‚       β”‚       useFindUser.js
β”‚       β”‚       UserContext.js
β”‚       β”‚
β”‚       β”œβ”€β”€β”€pages
β”‚       β”‚       About.js
β”‚       β”‚       Auction.js
β”‚       β”‚       Home.js
β”‚       β”‚       Loading.js
β”‚       β”‚       Login.js
β”‚       β”‚       PreviousAuctions.js
β”‚       β”‚       SignUp.js
β”‚       β”‚
β”‚       β”œβ”€β”€β”€routes
β”‚       β”‚       PrivateRoute.js
β”‚       β”‚       PublicRoute.js
β”‚       β”‚
β”‚       β”œβ”€β”€β”€sass
β”‚       β”‚   β”‚   main.scss
β”‚       β”‚   β”‚
β”‚       β”‚   β”œβ”€β”€β”€base
β”‚       β”‚   β”‚       animations.scss
β”‚       β”‚   β”‚       reset.scss
β”‚       β”‚   β”‚
β”‚       β”‚   β”œβ”€β”€β”€components
β”‚       β”‚   β”‚       bars.scss
β”‚       β”‚   β”‚       button.scss
β”‚       β”‚   β”‚       create-auction.scss
β”‚       β”‚   β”‚       error.scss
β”‚       β”‚   β”‚       form.scss
β”‚       β”‚   β”‚       games.scss
β”‚       β”‚   β”‚       loading.scss
β”‚       β”‚   β”‚       lobby.scss
β”‚       β”‚   β”‚       navbar.scss
β”‚       β”‚   β”‚       news.scss
β”‚       β”‚   β”‚       playerCard.scss
β”‚       β”‚   β”‚       title.scss
β”‚       β”‚   β”‚       user-accordian.scss
β”‚       β”‚   β”‚
β”‚       β”‚   β”œβ”€β”€β”€pages
β”‚       β”‚   β”‚       about.scss
β”‚       β”‚   β”‚       auction.scss
β”‚       β”‚   β”‚       home.scss
β”‚       β”‚   β”‚       loading.scss
β”‚       β”‚   β”‚       previous-auction.scss
β”‚       β”‚   β”‚
β”‚       β”‚   └───utilities
β”‚       β”‚           classes.scss
β”‚       β”‚           mixins.scss
β”‚       β”‚           variables.scss
β”‚       β”‚
β”‚       β”œβ”€β”€β”€services
β”‚       β”‚       auction.service.js
β”‚       β”‚       auth.service.js
β”‚       β”‚       news.service.js
β”‚       β”‚       players.service.js
β”‚       β”‚       sockets.service.js
β”‚       β”‚
β”‚       └───utilities
β”‚               axiosInstance.js
β”‚               handleChanges.js
β”‚               validation.js
β”‚
β”œβ”€β”€β”€controller
β”‚       auction.js
β”‚       bidding.js
β”‚       game.js
β”‚       user.js
β”‚
β”œβ”€β”€β”€data
β”‚       squads.json
β”‚
β”œβ”€β”€β”€database
β”‚   β”‚   connection.js
β”‚   β”‚
β”‚   └───models
β”‚           user.model.js
β”‚
β”œβ”€β”€β”€middleware
β”‚       auth.js
β”‚
β”œβ”€β”€β”€routes
β”‚       auction.route.js
β”‚       news.route.js
β”‚       socket.route.js
β”‚       user.route.js
β”‚
└───utilities
        players.js...

Steps to get the project running locally on your machine

Setting Up Environment Variables

  1. Create a .env file in the backend directory
  2. Initialize DEV_MONGO_URL to mongodb://localhost:27017/
  3. Initialize DEV_REACT_URL to http://localhost:3000
  4. Initialize DEV_SERVER_URL to http://localhost:8000
  5. Initialize SECRET to a JWT secret key

Installing the dependencies

Run the following command in the root of the project to install the packages on the server side:

npm i

Run the following command in the root of the project to install the packages on the client side:

cd client
npm i

Running the project

Run the following command in the root to get the client side and the server side running concurrently:

npm run dev

Note

Keep the monogodb database running locally before running the application.