Inspiration
Every time I get frustrated with my homework I like to look at pictures of my dog. Not only does she take my mind off the work, but I'm allowed to reminisce on our history... Nah I'm lying she's just really cute. So that's why I made Fluffy Friends!! Granted, my dog isn't fluffy by any means, but her cuteness is something I like to look at. But, why would I only limit myself to her? There are millioooons of other cute animals on the internet too. Boom. That's where Fluffy Friends comes in: cute animals for your luxury. MY fluffy friend
What it does
Users are able to scroll through my collection of cute animals (that I did not steal off of google). Just keep tapping the next button under the search tab! The website is guaranteed to pull you in with its appeal to cuteness.
How I built it
I built the website using a react-based framework, Gatsby. The styling was done with SASS, a CSS extension. I chose Gatsby because of its preloading of pages, ultimately making it one of the faster options. Also, I believed it was a great gateway to frameworks for me. I used Visual Studio Code with the appropriate plug-ins for my work environment. The website is deployed through Netlify cloud computing my github repository.
Challenges I ran into
I ran into many challenges. This was my first time touching javascript, so learning the semantics on top of the framework proved to be very difficult for me. These issues didn't make debugging any easier, as it was inarguably my greatest weakness. I spent upwards to 2 hours on bugs. My motivation hit record lows during those hours. I gave thought to scrapping the project in its entirety. The only thing that prevented me from doing so was the image of an inflated bunny staring at me on the screen. I didn't want the guilt of erasing it on my hands.
Accomplishments that I'm proud of
I'm glad I decided to make a website. This is the first one that I've deployed. What I'm most proud of, though, is my last bugfix. It seemed like there were no resources online to help me implement the feature I wanted, which was just the basic click-the-button-to-change-the-picture-feature. Eventually, I got it on my own by piecing multiple different resources together.
What I learned
Prior to this project, I had near zero experience with web development. I've probably made 3 HTML files before, but I've never touched CSS. I spent the first half of the hackathon learning what components make up a website. The latter was filled with rage-inducing bug fixes to my patchy markup. Overall, I got a better understanding of web development fundamentals.
What's next for Fluffy Friends
First, I must tackle the user's basic needs. If they like a particular photo a fluffy friend, they are unable to save it on the website. That being said, I will implement the feature to save those photos. Afterwards, I plan on allowing users to create their own accounts and post pictures of fluffy friends. Of course, this will be done with moderation. Last but not least, I plan on introducing Fluffy Friends to countries across the globe. If all goes according to plan, I will be a world leader in the next 5 years.
Built With
- css
- gatsby
- git
- graphql
- html
- javascript
- netlify
- sass
Log in or sign up for Devpost to join the conversation.