-
-
Lobby page
-
results screen
-
Lobby - host view
-
Vistool page
-
Lobby - non-host view
-
Homepage
Inspiration
After taking our Data structures class, we realized how vital our provided CSVistool is to our learning. The books offered good information for the basics, but actually visualizing nodes being added, and the data structure shifting around while following the algorithm ultimately led to our success. We thought of applying this idea to a easy to learn, but hard to master concept like CSS, where users can play in a game against others.
What it does
This project offers users the ability to manipulate the parameters that make up CSS lines to understand how it effects the whole element, and then apply this knowledge in a fun game against other people where you race against a timer to recreate a image as best as possible.
How we built it
Our project is built with React and TailwindCSS to allow for easy styling and navigation. Then we used Firebase as our backend database to store user information such as their name, code, and lobby Id. From there we have a simple file layout, only accessing the database for the lobby system, and the vistool entirely done in react.
Challenges we ran into
Most of the project went smoothly since each member was working on individual parts, however towards the end when we were making small styling changes we ran into issues where things like HTML not appearing would happen.
Accomplishments that we're proud of
Producing a functional product in a short amount of time, especially with sleep restrictions.
What we learned
We learned about the advantages and disadvantages of certain frameworks in making a project, and how we need to decide the limitations of certain ones, and prioritize the ones we need. We used this information to choose firebase as our database since it was simple, and satisfied all our needs for this project.
What's next for CSScape
Features we hope to implement in the future include a AI model that allows users to search for how they want to change an element, and then direct them to the category it would fall under in the vistool and give them more example uses.
Log in or sign up for Devpost to join the conversation.