Tailwind Tarsier

Inspiration

Inspired by projects such as Flexbox Froggy by Codepip, we set out to provide a fun way for members of the software development community to be introduced to Tailwind - Tailwind Tarsier!

What it does

Tailwind Tarsier is a web-based application the provides several challenges, each with their own Tailwind concept that can be applied to solve a coding problem.

How we built it

This project was built with Nextjs and react! The pages and components were done from scratch as we wanted this to be our design. We connected the project to a firebase database to make it more dynamic and scalable. Ideally, users will fill out a form or a map builder whose details will insert into our database and fill out in our website pages. The firebase details include titles, descriptions, solution arrays, and code blocks stored as strings. We used components to deconstruct code blocks and reconstruct them to have an interactive input field, and we have components for the levels that takes user inputs and dynamically applies the answer to render the tailwind classes as results!

Challenges we ran into

The challenges we ran into were mainly on JSX injection. React is protected and not easily injectable with string type codes. The code strings were stored flat and unreadable; We overcame this issue by creating a formatter that beautifies the code into a more readable JSX text.

Accomplishments that we're proud of

We are proud of how dynamic the game is. Taking user inputs and directly having effect on the pages and visualizer was excited and fun for us to work on. Another thing we are proud of is that we built all components from scratch. Designing with a time constraint is not easy. We had many iterations and adjustments in a small span of time, but we made it work and we are proud of how the elements interact with each other.

What we learned

We solidified our respective understandings of the tech stack we used to build Tailwind Tarsier. Next.js is a powerful framework that we are all using in other projects, so the opportunity to practice and improve further was very valuable.

What's next for Tailwind Tarsier

Next up is adding more and more levels! There are a lot of Tailwind concepts to learn, so there are almost endless possibilities for potential challenges!