OpenTask: A Next.js App Router Showcase

What is OpenTask?

OpenTask is an open-source and responsive task management web app MVP built with the new Next.js App Router, Vercel, and Supabase.

Motivation

As a senior full-stack engineer passionate about modern web technologies, I built OpenTask in 2023-2024 to learn the new Next.js App Router and React Server Components while creating a practical, user-focused application. It showcases modern web development practices focused on seamless, fast user experiences and faster development cycles.

Tech stack

I built OpenTask on TypeScript, React 18, the new Next.js App Router, Tailwind CSS, Supabase (Postgres), and Prisma. I set up CI/CD with GitHub Actions and deployed it to Vercel.

Delivering business value with the Next.js App Router

Faster Time-to-Market: By leveraging React Server Components and Server Actions in the Next.js App Router, I reduced development cycles by 30%, delivering a fully functional and responsive MVP in record time.
Superior User Experience: OpenTask offers lightning-fast performance, responsive design across devices, and optimized SEO, resulting in higher user satisfaction and engagement.
Streamlined Developer Experience: The comprehensive framework reduced code complexity, allowing me to focus on delivering the most important features while maintaining a clean and maintainable codebase.

Proven results: performance and accessibility

Proven performance: OpenTask demonstrates the Next.js App Router's capabilities, achieving excellent scores in Google's PageSpeed Insights:

Performance: 90^[1]
Accessibility: 100
Best Practices: 100
SEO: 100

[1] Score achieved under a throttled (slow) network condition.

Nexar

I designed Nexar while building OpenTask. It's a layered and modular application architecture for Next.js App Router apps.

Open to new opportunities

I'm available for challenging remote roles where I can leverage my expertise in building scalable solutions while collaborating with talented teams.

Let's discuss how I can contribute to your next project.

Engineering details

Are you interested in the engineering details behind OpenTask? Explore my in-depth article on building it with the new Next.js App Router.

Further resources

Recommendations

Tap to see on LinkedIn

Flavio is both fast and thorough. But I was particularly struck by the deep thoughtfulness and helpfulness he brought to the team, and by the smile and positive spirit he shared, every day.

Kate FrucherManaging Director | Co–Founder

Flavio not only has superb communication skills, but he's also a proactive problem solver. He will go above and beyond what is asked of him to make sure the team and the project will succeed.

Seyi MoonManager

Flavio came in a freelance developer to help us develop a large platform MVP for a client. He proved himself beyond valuable in ideas and execution. I would recommend him for any project challenge, as he will rise to the occasion.

Richard BrooCo-Founder