Introduction

As book lovers, we all know how important it is to have a space where we can discover, discuss, and organize our reading journey. That’s exactly what our site is all about: creating a place where readers can foster and strengthen their love for books.

In this project, I had the chance to contribute in several ways, and I’d love to share my experience with you. Let me take you through some of the main features I worked on.

Front-End Theme Work

Details on shaping the look and feel of the site, including adjusting colors, fonts, and layout.

# Front-End Theme Work

# Import necessary libraries for front-end development
from IPython.display import HTML, display

# Define CSS styles for the site
css_styles = """
<style>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
}
header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
}
nav {
    margin: 0;
    padding: 1em;
    background-color: #333;
}
nav a {
    color: white;
    margin: 0 1em;
    text-decoration: none;
}
main {
    padding: 2em;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
    position: fixed;
    width: 100%;
    bottom: 0;
}
</style>
"""

# Display the CSS styles
display(HTML(css_styles))

# Define HTML structure for the site
html_content = """
<header>
    <h1>Welcome to the Book Site</h1>
</header>
<nav>
    <a href="#home">Home</a>
    <a href="#books">Books</a>
    <a href="#login">Login</a>
</nav>
<main>
    <h2>Discover, Discuss, and Organize Your Reading Journey</h2>
    <p>Welcome to our book site, a place where readers can come together to share their love for books. Explore our collection, track your reading progress, and join the discussion!</p>
</main>
<footer>
    <p>&copy; 2025 Book Site. All rights reserved.</p>
</footer>
"""

# Display the HTML content
display(HTML(html_content))

A major part of the site is the login system. This feature was essential because we wanted users to be able to sign in and track their reading progress. Initially, I worked on a basic login, but I quickly realized there was more we could do. We wanted the majority of the site’s features to be hidden until a user logged in, creating a more personalized experience.

Through my work on the login system I did not manage to get the system fully operational but I fixed a lot of the issues. My feature of the hidden site features before loging in can then be implemented when we finish fixing it.

from flask import Flask, render_template, request, redirect, url_for, session from werkzeug.security import generate_password_hash, check_password_hash

Initialize the Flask application

app = Flask(name) app.secret_key = ‘supersecretkey’

In-memory user database for demonstration purposes

users = {}

Route for the home page

@app.route(‘/’) def home(): return render_template(‘home.html’)

@app.route(‘/login’, methods=[‘GET’, ‘POST’]) def login(): if request.method == ‘POST’: username = request.form[‘username’] password = request.form[‘password’] user = users.get(username) if user and check_password_hash(user[‘password’], password): session[‘username’] = username return redirect(url_for(‘profile’)) else: return ‘Invalid username or password’ return render_template(‘login.html’)

Route for the registration page

@app.route(‘/register’, methods=[‘GET’, ‘POST’]) def register(): if request.method == ‘POST’: username = request.form[‘username’] password = request.form[‘password’] if username in users: return ‘Username already exists’ users[username] = {‘password’: generate_password_hash(password)} return redirect(url_for(‘login’)) return render_template(‘register.html’)

Route for the user profile page

@app.route(‘/profile’) def profile(): if ‘username’ in session: return f”Welcome, {session[‘username’]}! This is your profile page.” return redirect(url_for(‘login’))

Route for logging out

@app.route(‘/logout’) def logout(): session.pop(‘username’, None) return redirect(url_for(‘home’))

Run the Flask application

if name == ‘main’: app.run(debug=True)

Creating the Static API for Books

Once the basic features were in place, I shifted focus to the books themselves. We wanted a way to display books based on their genre, so I created a static API. This API allowed us to show a list of books in different categories, like Mystery, Fantasy, or Romance, with basic details like title, author, and genre.

Creating the Static API for Books

Import necessary libraries for creating the static API

from flask import Flask, jsonify

Initialize the Flask application

app = Flask(name)

Sample data for the static API

books = [ {“title”: “The Great Gatsby”, “author”: “F. Scott Fitzgerald”, “genre”: “Classic”}, {“title”: “To Kill a Mockingbird”, “author”: “Harper Lee”, “genre”: “Classic”}, {“title”: “1984”, “author”: “George Orwell”, “genre”: “Dystopian”}, {“title”: “Harry Potter and the Sorcerer’s Stone”, “author”: “J.K. Rowling”, “genre”: “Fantasy”}, {“title”: “The Hobbit”, “author”: “J.R.R. Tolkien”, “genre”: “Fantasy”}, {“title”: “Pride and Prejudice”, “author”: “Jane Austen”, “genre”: “Romance”}, {“title”: “The Da Vinci Code”, “author”: “Dan Brown”, “genre”: “Mystery”}, ]

Route for the static API

@app.route(‘/api/books’, methods=[‘GET’]) def get_books(): return jsonify(books)

Run the Flask application

if name == ‘main’: app.run(debug=True)

Upgrading to a Dynamic API with Database Support

The next step was to make the API more dynamic and interactive. Instead of just showing static data, I connected the site to a database. This allowed users to add books to a reading list with details like the book’s title, author, and genre, and the backend would automatically update with these changes.

Not only could users add books to their lists, but they could also delete them if they decided to remove something from their reading collection. This was a fun feature to build because it made the site feel more alive, giving users a way to manage their reading preferences directly.

# Upgrading to a Dynamic API with Database Support

# Import necessary libraries for database support
from flask_sqlalchemy import SQLAlchemy

# Initialize the Flask application with database configuration
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///books.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

# Define the Book model
class Book(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    author = db.Column(db.String(100), nullable=False)
    genre = db.Column(db.String(50), nullable=False)

# Create the database and tables
db.create_all()

# Route for adding a new book
@app.route('/api/books', methods=['POST'])
def add_book():
    data = request.get_json()
    new_book = Book(title=data['title'], author=data['author'], genre=data['genre'])
    db.session.add(new_book)
    db.session.commit()
    return jsonify({'message': 'Book added successfully'}), 201

# Route for getting all books
@app.route('/api/books', methods=['GET'])
def get_books():
    books = Book.query.all()
    return jsonify([{'title': book.title, 'author': book.author, 'genre': book.genre} for book in books])

# Route for deleting a book
@app.route('/api/books/<int:id>', methods=['DELETE'])
def delete_book(id):
    book = Book.query.get_or_404(id)
    db.session.delete(book)
    db.session.commit()
    return jsonify({'message': 'Book deleted successfully'})

# Run the Flask application
if __name__ == '__main__':
    app.run(debug=True)

How my data base works

Inputs The inputs to my database are the details of the books that users add to their reading lists. These details include: Title: The title of the book. Author: The author of the book. Genre: The genre of the book.

Outputs The outputs from your database are the details of the books that are retrieved from the reading lists. These details include: Title: The title of the book. Author: The author of the book. Genre: The genre of the book.

Adding a book
@app.route('/api/books', methods=['POST'])
def add_book():
    new_book = Book(title=request.json['title'], author=request.json['author'], genre=request.json['genre'])
    db.session.add(new_book)
    db.session.commit()
    return jsonify({'message': 'Book added successfully'})

Removing a book 
@app.route('/api/books/<int:id>', methods=['DELETE'])
def delete_book(id):
    book = Book.query.get(id)
    if book:
        db.session.delete(book)
        db.session.commit()
        return jsonify({'message': 'Book deleted successfully'})
    return jsonify({'message': 'Book not found'})

Retrieving books
@app.route('/api/books')
def get_books():
    books = Book.query.all()
    return jsonify([{'title': book.title, 'author': book.author, 'genre': book.genre} for book in books])

Back up and restore functions

Running the file on db_init.py initializes the database idk

Then once you have data in the database running it on db_backup.py backs up the data in the database idk

If you ever want to take the data from the backup and restore it to the database then you run db_restore.py idk

To make the user experience even smoother, I began working on a cookie system. The idea behind this was to save login information so that users wouldn’t have to log in every time they visited the site. This small change would make returning to the site much easier and more convenient.

# Enhancing the Login System with Cookies

# Import necessary libraries for cookie management
from flask import Flask, render_template, request, redirect, url_for, session, make_response
from werkzeug.security import generate_password_hash, check_password_hash
import datetime

# Initialize the Flask application
app = Flask(__name__)
app.secret_key = 'supersecretkey'

# In-memory user database for demonstration purposes
users = {}

# Route for the home page
@app.route('/')
def home():
    return render_template('home.html')

# Route for the login page
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = users.get(username)
        if user and check_password_hash(user['password'], password):
            session['username'] = username
            resp = make_response(redirect(url_for('profile')))
            expires = datetime.datetime.now() + datetime.timedelta(days=7)
            resp.set_cookie('username', username, expires=expires)
            return resp
        else:
            return 'Invalid username or password'
    return render_template('login.html')

# Route for the registration page
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        if username in users:
            return 'Username already exists'
        users[username] = {'password': generate_password_hash(password)}
        return redirect(url_for('login'))
    return render_template('register.html')

# Route for the user profile page
@app.route('/profile')
def profile():
    username = session.get('username') or request.cookies.get('username')
    if username:
        return f"Welcome, {username}! This is your profile page."
    return redirect(url_for('login'))

# Route for logging out
@app.route('/logout')
def logout():
    session.pop('username', None)
    resp = make_response(redirect(url_for('home')))
    resp.set_cookie('username', '', expires=0)
    return resp

# Run the Flask application
if __name__ == '__main__':
    app.run(debug=True)

Conclusion

This project has been an incredible learning experience for me. From working on the front-end theme to building a dynamic backend with a database, I’ve been able to contribute to something that can really help readers manage and enjoy their books.

I’m excited about how the site is shaping up, and I’m proud of the features I’ve worked on—whether it’s improving the login system, creating an API to manage reading lists, or starting the groundwork for a smoother user experience with cookies. Every step has helped bring us closer to building a space where readers can come together, share, and most importantly, enjoy their books!

Introduction

Front-End Theme Work

Building the Login System

Building the Login System

Import necessary libraries for building the login system

Initialize the Flask application

In-memory user database for demonstration purposes

Route for the home page

Route for the login page

Route for the registration page

Route for the user profile page

Route for logging out

Run the Flask application

Creating the Static API for Books

Creating the Static API for Books

Import necessary libraries for creating the static API

Initialize the Flask application

Sample data for the static API

Route for the static API

Run the Flask application

Upgrading to a Dynamic API with Database Support

How my data base works

Back up and restore functions

Enhancing the Login System with Cookies

Conclusion