GroupUp Unveiled
Frontend Tech Stack
If you'd like to leave a comment, the original post can be found on Dev.to and Medium.
Table of Contents
├── 🎨 Frontend
├ ├─ 🔶 React
├ ├─ 🔶 Typescript
├ ├─ 🔶 Eslint
├ ├─ 🔶 Prettier
├ ├─ 🔶 Vite
├ └─ 🔶 Jest
├── ➕ Other
└── ⏭️ What's next
Since choosing a tech stack can be tricky, I've split this topic into two parts: frontend and backend technologies used in GroupUp. There are tons of options (almost endless in web development), and while migration is possible later, it's usually time-consuming and not always fun.
Frontend
For now I will just mention the technologies used in the frontend development process. I may go into more detail about each technology in future posts.
🔶 React - The Library for Web and Native User Interfaces
I started GroupUp nearly three years ago. Back then, the three major web frameworks were Angular, React, and Vue. They're likely still the most popular, but there are many more options today (as you may know, a new day means a new frontend framework 😅).
Initially, I learned Angular, but as a web development newbie, I found it quite challenging. A friend suggested React, and it felt more natural for me at that time (it wasn't as reliant on complex framework magic like hooks are now). This freedom allowed me more control, but as an inexperienced developer, it also led to some chaotic code.
Today, I appreciate Angular's structured approach. I might use it someday, but for now, I'm sticking with React.
While migrating frameworks can be a lot of work, the good news is that well-maintained and widely adopted frameworks like these shouldn't cause major roadblocks down the line.
🔶 TypeScript - JavaScript with Syntax for Types
Using TypeScript involves learning some extra JavaScript, but for larger projects (like GroupUp!), it's a lifesaver. Complex logic without clear data types can quickly become a nightmare. TypeScript also helps prevent bugs that might otherwise take time to debug.
However, avoid overcomplicating things. I've gotten frustrated wasting time on overly complex types instead of writing actual application code.
JSDoc is another option. It requires more writing, but doesn't need a compiler like TypeScript. Recently, some developers have questioned TypeScript's necessity, but it works well for me, and I'll stick with it for now. For smaller projects, I'd recommend trying JSDoc.
🔶 Eslint - Find and Fix Problems in Your JavaScript Code
I highly recommend Eslint for finding and fixing code issues. If you use an editor like VS Code, you can install the Eslint extension to highlight issues in real time.
Many Eslint plugins are available, so you don't need to configure everything from scratch. Using Eslint also promotes consistent coding style.
I've set up a pre-commit hook that runs Eslint before every Git commit, ensuring the code pushed to the repository adheres to the rules defined in my Eslint configuration file.
🔶 Prettier - Opinionated Code Formatter
Prettier ensures your code is well-formatted, saving you time on adding/removing spaces, maintaining consistent line widths, and so on.
Similar to Eslint, you can install Prettier as a VS Code extension for live formatting. You can also run it through a pre-commit hook to guarantee well-formatted code before pushing to the remote repository.
🔶 Vite - Next Generation Frontend Tooling
Vite stole my heart from the start. Before Vite, the standard way to create a React app was with Create React App (CRA) , which is no longer recommended or supported. While I generally dislike changing things that work, CRA's slow development server was a constant source of frustration.
When Vite came out, I knew I had to try it. Migrating from CRA to Vite wasn't too painful (there are many tutorials available), and the benefits were huge. My development server now starts in under two seconds, and there are many plugins to support various functionalities (like setting up a Progressive Web App quickly).
Here's the fixed and improved text, keeping the casual tone:
🔶 Jest - Delightful JavaScript Testing Framework
I started using Jest with React Testing Library for my components. It came bundled with Create React App (CRA), so I didn't explore other options. While Jest works, I've come across Vitest, which seems like a strong contender.
Vitest integrates seamlessly with Vite, requires less configuration, and supports the modern standard, ECMAScript Modules (ESM) (more on Module Types here)
When I switched from CRA to Vite, I attempted a Jest-to-Vitest migration. However, I ran into errors due to my existing Jest test base covering various scenarios. So, I decided to hold off for now.
Migrating to Vitest remains on my radar, but Jest is handling things for now.
➕ Other
To achieve different functionalities, I've also used various libraries and tools, such as: OneSignal for push notifications, Capacitor for mobile app development, Sentry for error tracking, but I'll delve into these in future posts.
⏭️ What's Next?
In the next post, I'll goe into the backend of GroupUp, which is built with Supabase, an open source Firebase alternative. I'll also discuss the reasons behind choosing Supabase and how it's been working out so far. Stay tuned!
