This project is a showcase of Steam redesign, inspired by Juxtopposed's video.
Important
Update from March 28th 2024:
Hey! It's me, AmadeusTwi, it's been a while since I touched on this project and my development halted for personal reasons. But soon enough, I will resume the development and I'm very sorry that I was not able to deliver on speed of the development. I feel like I let Juxtopposed's idea go to waste and the stars I got from this repo are undeserved, which is not what I want at all.
Warning
This app is a work in progress. I'm building this in public. You can follow the progress on my Twitter/X - @AmadeusTwi. See the roadmap below.
Project's objective is to recreate Juxtopposed's Steam redesign from their video with the coolest tech out there that I truly love and believe in!
Initial scaffold was created using create-t3-app and is subject to change depending on the project's needs - features may be added and even deleted.
- Next.js App Router
- Authentication using NextAuth.js (might consider Clerk)
- ORM using Drizzle
- Styled using Tailwind CSS
- Validations using Zod
- Written in TypeScript
Note
Hey, I know I might not need all of these tools, stuff will change, and I'm open to suggestions.
Roadmap is subject to change.
- Initial scaffold
- Add mandatory commitlint
- Add GitHub Actions for PRs, Releases, etc.
- Add Turbopack - unsure yet
- Implement Steamify design system with Tailwind CSS
- Add Motiva Sans font
- Consider new database options since Planetscale gets rid of free plan
- Implement pages
- Main page
- Game store
- Browse games
- Discover
- Wishlist
- Cart
- Point Shop
- Library
- Download
- Profile
- Settings
- Community
- Discussions
- Workshop
- Market
- Implement components
- Search bar
- Sorting UI
- Menu Dropdown (with menu items)
- Menu buttons
- Sort filter toggles
- Tags
- Price UI
- Game CTA (add to cart, price, discount, end date)
- Buttons (primary, secondary, tertiary, with/without icons)
- Toggle
- Wishlist button
- Reviews UI
- Checkbox
- Notifications UI
- Friends UI
- Account Dropdown
- Download Status UI
- Website Header
- Website Footer
- Client Header (app-like)
- Carousel
- Filter Modal
- Section UI (profile sections, game sections, etc)
- Library Game Card
- Store section Layout
Contributions are welcome. Feel free to open an issue or a pull request. See CONTRIBUTING.md for more information.
This project is licensed under the MIT License - see the LICENSE.md file for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent