- Tech Stack 👨💻
- My Inspiration 💡
- What it does ✨
- How I built it 🐺
- Screenshots 🖼️
- How to play 🎭
- Project Structure 💪
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.
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.
- 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.
- 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
.
│ .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...
- Create a .env file in the backend directory
- Initialize DEV_MONGO_URL to mongodb://localhost:27017/
- Initialize DEV_REACT_URL to http://localhost:3000
- Initialize DEV_SERVER_URL to http://localhost:8000
- Initialize SECRET to a JWT secret key
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
Run the following command in the root to get the client side and the server side running concurrently:
npm run dev
Keep the monogodb database running locally before running the application.