Inspiration
I began this project with no experience in HTML, CSS, or website creation, but I wanted to try something new. To get started, I watched a bunch of YouTube videos to learn the basics and figure out how everything worked.
My love for books also played a big part in the inspiration. When I volunteered at a local Thai school teaching English, the teachers often said their biggest struggle was the lack of books for students to read. They only had worksheets. That experience gave me the idea to build a website that could collect books in different languages so anyone learning could have access to real resources.
How we built it
I built the website using Flask in Python with HTML templates and CSS for design. I split different pages and functions into multiple HTML pages to make it easier to work on and complied most of the design aspects into one CSS page. The python was then used to connect each page together and solve the technical side of things.
General Timeline
On Friday, when the theme was announced, I spent most of the day brainstorming ideas that fit both my limited experience and the theme. That’s when the idea for a book-sharing website came together.
Saturday was all about figuring things out. I spent the morning following a confusing YouTube tutorial on Flask, Python, and HTML. What was supposed to be a one-hour video ended up taking me four hours. At one point, I couldn’t understand why my code wasn’t working, only to realize half an hour later that I had forgotten to hit “save.” In the afternoon, I started coding the actual website. By the end of the day, I had a title, a button linking to the “Add Book” page, and another placeholder button. It wasn’t much, but it felt like a big win.
On Sunday, I coded all morning and managed to finish more than half of the framework. I struggled with the database not working properly when adding files, but with some help from Visual Studio Code’s assistant, I figured out that I needed to delete the old database and create a new one that supported files.
Monday was focused on formatting the homepage, including the book banner, open-book backgrounds, and bookshelf layout. Adding images was especially frustrating since the banner kept resizing incorrectly.
On Tuesday, I managed to get the open-book background to display properly and finally fixed the banner issue. I also wrapped up the homepage and started editing the other HTML pages.
By Wednesday, I had finished the design of the site and added a few example books. At that point, I felt much more confident with the project and could code faster than when I first started.
On Thursday, I focused on creating the video demos and other sources that are needed to submit this hackathon.
Challenges and Lessons Learned
There were plenty of challenges along the way: confusing tutorials, broken databases, CSS problems, and even the simple mistake of forgetting to save. I started this project with no experience at all, and by the end, I had created a working prototype that I’m proud of. More than anything, I learned that persistence, and a lot of trial and error, can turn something overwhelming into something achievable. I hope that my website will become useful for anyone trying to learn a new language or is just trying to find some new books to read.
Log in or sign up for Devpost to join the conversation.