Note Because nothing lasts forever, here is the archived Chime website.

Clone of the Chime website;
as the name might suggest.

---

Table of Contents 📖

• Introduction 👀
• Comparison 🔎
• Tech Stack 💻
• Thoughts 💭
• Credits 👥
• License 📝

Introduction 👀

Chime Clone is a clone of the Chime website developed solely by @kon-pas with the purpose of self-learning web development.

Chime's original website is generally well done, but I had to make few minor adjustments, mostly spacing-related. Nothing's perfect, certainly not a WordPress website.

Comparison 🔎

Head to comparison.md for the comparison index, including archived Chime website.

Alternatively, visit Chime Clone & Chime Originial.

Tech Stack 💻

• Scripting

  • TypeScript@4.8.0 – static typing with pleasure

• Backend

  • Next.js@12.3.1 – data fetching, routing & plenty of features Next.js has to offer
  • Prisma@4.8.0 – data mapping, modeling & typing, database client

• Frontend

  • React@18.2.0 – on which Next.js is built
  • styled-components@5.3.6 – for styling components, duh
  • CSS@3.0.2 – writing styles

• Deployment

  • MongoDB Atlas – database deployment
  • Vercel – frontend & backend deployment

• Design

  • Adobe Photoshop – fixing scrapped raster graphics
  • Adobe Illustrator – minor adjustments to SVGs

• Code Quality

  • ESLint@8.22.0 – static code analysis
  • Prettier@2.8.3 – code formatting
  • Lighthouse – performance, quality & correctness

• Utils

  • bcrypt@5.1.0 – hashing passwords
  • nanoid@4.0.0 – generating IDs
  • usehooks-ts@2.9.1 – handling session & hover event
  • react-hook-form@7.38.0 – login & registration form

Thoughts 💭

Tech stack is pretty much similar to the Kolor-Dev's one.

Next.js with TypeScript is great.

I definitely prefer CSS-in-JSS over other approaches, including Sass, but I do regret not using TailwindCSS.

I should write boilerplate code less often and use third party libraries instead. usehooks-ts & react-hook-form was a good choice. Maybe I should have used axios, too.

Even though, writing all components by myself was a great exercise.

Credits 👥

All credits go to the original Chime website.

License 📝

This project is MIT licensed.