https://github.com/kylemocode/live-countdown-picker

A simple lottery web app built with Next.js 🚀
https://github.com/kylemocode/live-countdown-picker

Last synced: 23 days ago
JSON representation

A simple lottery web app built with Next.js 🚀

• Host: GitHub
• URL: https://github.com/kylemocode/live-countdown-picker
• Owner: kylemocode
• Created: 2020-12-30T12:38:43.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-09T15:56:30.000Z (almost 4 years ago)
• Last Synced: 2023-03-05T14:57:42.031Z (almost 2 years ago)
• Language: TypeScript
• Homepage: https://live-countdown-picker.vercel.app/
• Size: 952 KB
• Stars: 2
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Live Countdown Picker

A simple fullstack lottery webapp built with Next.js, TypeScript, Redux Toolkit , Styled-Components and Prisma with PostgresSQL.

![image](./assets/live-countdown-picker.gif)

## Preview

[Live Countdown Picker](https://live-countdown-picker.vercel.app/)

## Installation

```shell

$ git clone https://github.com/kylemocode/live-countdown-picker.git

$ cd live-countdown-picker

$ npm install && npm run dev (or using yarn instead)

```

## Features:

### High Performance And Good SEO

![](https://i.imgur.com/y4YM0KX.png)

In addition to some performance optimizations unique to react such as useMemo, useCallback, React.memo or redux state cache mechanism such as reselect, this project also implement virtualized list in CandidatesList component, preventing performance bottleneck while the candidates list is huge.

Provide basic meta tag to get a good SEO point in lighthouse.

### Maintainable And Scalable Code Base

Although this is a small project, I still presuppose that it will need to scale in the future, so I manage the code base as maintainable and scalable as I can. For example, I utilize theme provider in styled-components (now only support media query, maybe it can support font color and some design guideline in the future)

### Use RTK To Avoid Complex Redux Boilerplate

This project use [Redux-Toolkit](https://github.com/reduxjs/redux-toolkit) to structure redux data architecture, not only does it avoid writing lots of redux boilerplate code, it also allow us to safely 'mutate' the state directly (still implement immutable object behind the scene), making the code base more readable and maintainable.

### Responsive Web Design (RWD)

Currently, the project only support Desktop version and Tablet version (768px as break point), but I will easily expand the styles of different device sizes in the future.

### Polyfill-less Bundling Script

Inspired by [this post](https://instagram-engineering.com/making-instagram-com-faster-code-size-and-execution-optimizations-part-4-57668be796a8), this project uses ES2017 as Typescript transpile target, since nearly 56% of user's browser supports ES2017+ syntax. As a result, this shrinks source-mapped bundle size, and gained runtime performance.

## Roadmap (Todo List)

  - [X] Turn this project to Full-Stack project using Next.js API routes.

  - [X] PWA service-worker

  - [ ] Batch insert candidates

  - [ ] Candidates can upload his/her own avatar

  - [ ] More styles for different device sizes (Now only use 768px as the break point)

  - [ ] Flexible timer (Currently support minute only)

  - [ ] Use modal to show winner

  - [ ] Persistence feature such as redux-persist or DB storage.

  - [ ] Increase Unit Test Coverage

  - [ ] CICD Pipeline