Mobile
Desktop
- Currently being used in production.
- Average 15,000 new users a month.
- Light/Dark mode.
- Daily sports betting tips displayed in tomorrow's, today's and past sections.
- Tips are displayed in cards with the tour level logo, start time, tournament name, headline, prediction, odds, units staked and reasoning.
- Completed predictions are graded with either a win, loss, or push, and the resulting profits are displayed on the slip.
- Stats are automatically calculated and displayed on the Records and Stats page.
- The Records page shows the most important stats in the win/loss/push overall record; return on investment (ROI), units staked, units returned, and others.
- The Stats page shows more detailed stats like the total amount of picks, days tracked, current streaks, longest streaks, win percentage, profits over a week, a month, a year, overall. There's also a projections section that allows you to calculate how much money you would have made if you followed the tipster's tips on different intervals.
- Admins have access to protected routes where they can add new tips or parlays and decide on preferred picks release time or preferred UI for users.
- Admins can update picks before the match starts and update time displayed on the pick for tipster's credibility.
- Admins can grade the pick as a win, loss, or push after the event has finished.
| Tech | What for |
|---|---|
| TypeScript | Make coding fun again. |
| React | Build a component-based user interface. |
| Next.js | Server-side rendering (SSR) of React components. |
| Tailwind CSS | Fast & powerful way to build a beautiful UI. |
| Headless UI | UI components for Tailwind CSS. |
| React Hook Form | Form state management and validation. |
| React Select | Select input control component for React. |
| React Virtuoso | Efficiently render large data sets. |
| Nivo Graphs | Data visualization. |
| SWR | Cache & data fetching. |
| Axios | HTTP promise-based data fetching requests. |
| Moment.js | Parse & display dates. |
| Tech | What for |
|---|---|
| TypeScript | Make coding fun again. |
| Node.js | JavaScript runtime environment. |
| Next.js API | API endpoints as Node.js serverless functions. |
| MongoDB | NoSQL document-based database. |
| Mongoose | Interact with the database. |
| NextAuth.js | Local and social authentication solution. |
| Axios | Fetch data with promise-based HTTP requests. |
| REST API | HTTP API architecture. |
| Tech | What for |
|---|---|
| Vercel | Host the client. |
| MongoDB Atlas | Host the database. |
There's a very interesting subreddit in Reddit: /r/sportsbook. This subreddit is dedicated to sports betting tips. In it, there's a daily thread called the "Pick of the Day," which drops at a set time every day. On this thread, tipsters from all around the world post their picks along with their record. The highest upvoted comments rise to the top, and the most downvoted sink to the bottom. My client wanted to replicate a similar environment where he could post his daily picks, keep track of his record, and showcase other important stats that a simple comment thread could not include. Graphs, projections, an interactive UI. etc.
Maize Picks is a simple, minimal solution that emcompasses the selling product (the reliable tips) and allows the audience to, in simple terms, get in and get out. The platform fosters a mutual relationship where the owner posts his picks and the users see them.
- Master TypeScript.
- Master Tailwind CSS.
- Handle large numbers & calculations.
- Integrate client's features on a timely basis.
- Deploy new features to production while maintaining the product up and running.