React, TypeScript, Tailwind CSS, and Next.js | Beginner Project
Beto, April 7, 2022 · 1,795 views
An emoji search app sounds tiny, but it touches almost everything a beginner needs: state, filters, modals, TypeScript types, and Tailwind styling inside a real Next.js project. By the end you have something deployed that you actually want to show people.
I build it step by step in the video, from to the finished UI.
What's inside
- Scaffolding a Next.js project with the TypeScript flag
- Configuring Tailwind CSS the official way
- Live search plus category filters for food, flags, and more
- Typing your emoji data so it stays maintainable
- Building a details modal that closes on outside click
- Deploying the app and grabbing the full source code
Resources
CourseReact with TypeScript course
Go from fundamentals to real projects with React, TypeScript, and Next.js.
Had a win? Get featured on Code with Beto.Share your story
Like this article? Get the rest of the library plus weekly React Native tips. Free.