Ipl-Auction

Hit ⭐ if you like this project

Overview

• Tech Stack 👨‍💻
• My Inspiration 💡
• What it does ✨
• How I built it 🐺
• Screenshots 🖼️
• How to play 🎭
• Project Structure 💪

Tech Stack 👨‍💻

My Inspiration 💡

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 ✨

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 🐺

• 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 🎭

• 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.

Built With

• html
• javascript
• scss
• shell