A Full-Stack web application where users can explore a variety of books, leave comments, and manage user authentication. Built using Django Rest Framework (DRF), React, and SQLite, it follows modern UX/UI and accessibility guidelines while providing a fully responsive design.
Project Link
- Users can browse books, read descriptions, and leave comments.
- Secure user auth 🔹 Admin Features
✅ Manage books (Add, Update, Delete)
✅ Moderate user comments
✅ Monitor user activity
The database structure was planned using Lucidchart to visualize relationships between data models.
--
--
--
Purpose: Allow users to create an account.
- Start → User initiates a registration request.
- Validate registration data:
- Uses
CustomerRegistrationSerializerto check fields (e.g., username, password, email).
- Uses
- Is data valid?
- No → Return
400 Bad Requestwith validation errors (e.g., duplicate email, weak password). - Yes → Proceed to the next step.
- No → Return
- Create user → Save the validated data to the database.
- Return
201 Created(successful registration).
- Public endpoint (no authentication required).
- Relies on Django REST Framework’s
CreateAPIViewfor streamlined user creation.
Purpose: Authenticate a user and generate an access token.
- Start → User submits credentials (e.g., username/password).
- Validate login data:
- Uses
LoginSerializerto verify credentials.
- Uses
- Is data valid?
- No → Return
400 Bad Request(e.g., invalid password, missing fields). - Yes → Proceed to the next step.
- No → Return
- Fetch user → Extract the validated user from the serializer.
- Get/Create token → Generate a unique auth token (or reuse an existing one).
- Return
200 OKwith the token (used for authenticated requests).
- Token-based authentication (DRF’s Token model).
- Tokens persist until manually deleted (e.g., during logout).
Purpose: Invalidate the user’s session by deleting their token.
- Start → User sends a logout request.
- Check authentication:
- No → Return
403 Forbidden(unauthorized access). - Yes → Proceed to the next step.
- No → Return
- Delete token → Remove the user’s auth token (e.g.,
request.user.auth_token.delete()). - Return
200 OKwith a success message.
- Start
- Retrieve book object by ID (from URL/path parameter)
- Fetch all comments for the book (e.g., book.comments.all())
- Serialize comments (using CommentSerializer)
- Return 200 OK with serialized data → End
- Start
- Check request method:
- POST:
- Create serializer with request.data
- Is serializer valid?
- No:
- Return 400 Bad Request (with errors) → End
- Yes:
- Save data (to database)
- Return 201 Created → End
- GET Flow (List Contacts)
- Start
- Check request method:
- GET:
- Fetch all contacts from the database
- Serialize contacts data (using ContactSerializer)
- Return 200 OK (with serialized data) → End
To ensure smooth project management, I utilized Agile methodology along with a Kanban board in GitHub Projects. This approach helped in tracking progress, managing tasks, and ensuring timely completion of features.
- Epics & User Stories: The project was broken down into user stories to prioritize development.
- Task Breakdown: Each user story was divided into smaller tasks for better tracking and completion.
- Iterative Development: Features were implemented in sprints, allowing continuous improvement.
To see the project's Kanban board, click here.
To build a user-centric product, I stepped into the shoes of future users and identified essential features and functionalities. This led to the creation of 12 User Stories:
- 6 Mandatory stories, providing core functionality.
Each User Story included:
- Acceptance Criteria
- Bite-sized Tasks for easy tracking
- Bug Tracking & Comments to document issues and solutions
As tasks were completed, user stories moved from "In Progress" to "Completed" in the Kanban workflow.
- USER STORY: User needs to authenticate
- USER STORY: Need to contact
- USER STORY: Need a place to see the books and book details
- USER STORY: Need a place to comment on a book
- USER STORY: Structure Database
- USER STORY: Create UX
✅ View a collection of books
✅ Read details about each book
✅ Leave comments on books
✅ Secure Login & Logout system
✅ Manage Books
✅ See Users
Each User Story contributed to the following implemented features:
- Implemented user authentication allowing users to sign up, log in, and log out securely.
- Integrated password hashing and session management for security.
- Ensured proper authorization, restricting access to certain features based on authentication status.
- Utilized CSRF protection and security best practices.
(Related to: USER STORY: User needs to authenticate)
- Created a dedicated contact page for users to send inquiries.
- Integrated a form submission system to collect messages from users.
- Provided email or backend processing for handling contact requests.
(Related to: USER STORY: Need to contact)
- Designed a books listing page showcasing available books.
- Each book has a detailed page, including title, author, description, and other metadata.
- Implemented search and filter functionality for an improved user experience.
(Related to: USER STORY: Need a place to see the books and book details)
- Users can leave comments on book pages.
- Implemented comment moderation features, ensuring appropriate content.
- Comments are displayed in a structured manner, showing user details and timestamps.
(Related to: USER STORY: Need a place to comment on a book)
- Designed and structured the database schema efficiently.
- Created tables/models for users, books, comments, and related data.
- Optimized relationships and indexing for performance.
- Developed an intuitive UI/UX for seamless navigation.
- Ensured responsive design for desktop and mobile users.
- Used modern styling frameworks to enhance aesthetics and usability.
(Related to: USER STORY: Create UX)
I have several enhancements planned to improve the platform's functionality and user experience. Here are some key features that I intend to implement in future updates:
Comment Management – Allow users to delete and edit their own comments for better interaction control. Profile Enhancements – Enable users to update their profile details, including changing their username, profile picture, and password. Notifications System – Implement in-app or email notifications for replies to comments, new book additions, and important updates. Advanced Search & Filtering – Improve book discovery with filters for categories, authors, and user ratings to make navigation easier. Bookmark & Reading List – Allow users to save books to a personal reading list and track their progress. User Roles & Permissions – Introduce different roles, such as moderators, to help manage content and maintain community guidelines. Dark Mode – Add a dark mode option for a better reading experience in low-light environments. Review & Rating System – Enhance community engagement by allowing users to rate books and leave structured reviews. These features will significantly enhance the platform, making it more interactive, user-friendly, and feature-rich. Stay tuned for future updates! 🚀
| Technology | Purpose |
|---|---|
| Django Rest Framework (DRF) | Backend API |
| React | Frontend UI |
| SQLite | Database |
| JWT Authentication | Secure user login/logout |
| Tailwind | Responsive design |
| Fetch | API requests from React |
| React Router | Navigation between pages |
| Railway | Deployment platform for hosting backend and frontend |
Why I feel API-based architecture (DRF) is better than traditional Django views?
Instead of using traditional Django views, we opted for a RESTful API using DRF. Here’s why:
1️⃣ Separation of Concerns
- The backend (DRF) handles data logic, while React focuses on UI.
- Makes code more modular and maintainable.
2️⃣ Scalability
- APIs can serve multiple frontends (Web, Mobile, etc.).
- A React frontend can be easily replaced or updated without touching the backend.
3️⃣ Performance
- DRF allows for optimized data retrieval using serialization.
- Reduces redundant database queries compared to traditional Django templates.
4️⃣ Security
- JWT authentication ensures secure login across devices.
- CORS handling protects the API from unauthorized access.
🎥 I was influenced by this video
Testing was conducted on multiple devices, including a Lenovo Ideapad Laptop and a Samsung Galaxy A5, using the latest versions of Google Chrome, Mozilla Firefox, and Opera. For more detailed testing, Google DevTools was used to simulate different screen sizes.
- Home Page ✅
- Books Page ✅
- Book Details Page ✅
- Contact Page ✅
| Test | Result |
|---|---|
| User can create a profile | ✅ Pass |
| User can log into profile | ✅ Pass |
| User can log out of profile | ✅ Pass |
| Comments are displaying correctly | ✅ Pass |
| Comments are dismissable by button and timeout | ✅ Pass |
| Test | Result |
|---|---|
| User can easily navigate to the books section | ✅ Pass |
| User can access the Contact page | ✅ Pass |
| User can comment on a book | ✅ Pass |
| SuperUser can access the admin page | ✅ Pass |
| Test | Result |
|---|---|
| Only SuperUser can access the admin panel | ✅ Pass |
| Non-authorized users cannot access profile page | ✅ Pass |
| Non-authorized users cannot comment on a book | ✅ Pass |
| Test | Result |
|---|---|
| User can view all available books | ✅ Pass |
| User can view book details | ✅ Pass |
| User can leave a comment on a book | ✅ Pass |
| User can edit their profile details | ✅ Pass |
| User can delete their profile | ✅ Pass |
| Confirmation messages appear after successful actions | ✅ Pass |
| Test | Result |
|---|---|
| Items display correctly when updated/added | ✅ Pass |
| Admin can approve or delete user comments | ✅ Pass |
- 🔹 Minor UI Issue: Some elements may slightly misalign on very small screens.
- 🔹 Button Styling Issue: A green submit button is automatically generated by the form system and does not follow the custom styling.
- 🔹 Past Booking Prevention: The function that prevents users from selecting past dates for a booking is not fully working. However, admins can still verify and reject such bookings manually.
📌 Note: These bugs do not affect core functionality and will be addressed in future updates.
I deployed my fullstack Django + React project on Railway. I chose Railway over Heroku because SQLite (which I used for my database) is not well-suited for Heroku's ephemeral filesystem.
- Persistent Storage: Unlike Heroku, which resets its filesystem on every deploy, Railway provides persistent storage, making it suitable for SQLite.
- Easy Deployments: Railway allows seamless deployments for both backend and frontend in a single project.
- Built-in Database Support: While I used SQLite for simplicity, Railway also supports PostgreSQL, MySQL, and more.
- Signed up at Railway.
- Clicked "New Project" and chose Deploy from GitHub.
- Connected my GitHub repository.
I created a Procfile in my Django project root:
sh echo 'web: gunicorn myproject.wsgi' > Procfile
I ensured my requirements.txt had the necessary dependencies:
txt gunicorn django django-cors-headers djangorestframework dotenv
I modified settings.py:
python import os import dj_database_url
DEBUG = False ALLOWED_HOSTS = ['*']
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } }
python STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATIC_URL = '/static/'
Then, I ran:
sh python manage.py collectstatic
I committed the changes and pushed them to GitHub. Then, in Railway:
- Added a new service → GitHub Repo → Selected backend.
- Set PYTHON_VERSION=3.9 in Variables.
- Set RAILWAY_STATIC_URL for static files (if needed).
- Clicked Deploy.
I ensured package.json had:
json "scripts": { "build": "react-scripts build" }
Then, I ran:
sh npm install npm run build
I moved the build/ folder to Django’s static/:
sh mv build/ myproject/static/
Then, I updated Django urls.py:
python from django.views.generic import TemplateView urlpatterns += [ path('', TemplateView.as_view(template_name='index.html')), ]
I committed the changes and pushed them to GitHub. Then, in Railway:
- Added a new service → GitHub Repo → Selected frontend.
- Set NODE_ENV=production.
- Clicked Deploy.
In Railway, I opened the backend terminal and ran:
sh python manage.py migrate
sh python manage.py createsuperuser
My Django + React app is now live on Railway! 🚀
This project was made possible through the collective efforts of various open-source communities, online learning platforms, and helpful resources. Special thanks to the following:
- Django Rest Framework Full Course
- React & Django Integration
- Building a Full-Stack App
- Django Authentication System
- React Hooks & State Management
- Tailwind CSS for Beginners
- React Router Explained
- JWT Authentication in Django
- SQLite Database Optimization
- Deploying Django + React on Railway
- Best UX/UI Practices
- Kanban Board & Agile Development
- Django Rest Framework Official Docs
- React Official Documentation
- SQLite Documentation
- Railway Deployment Docs
- MDN Web Docs
- W3Schools
- Django & DRF for backend development
- React & React Router for frontend development
- Tailwind CSS for responsive UI
- JWT Authentication for secure user management
- Lucidchart for database planning
- GitHub Projects for task tracking
- Google DevTools for testing
A huge thank you to my mentor Spencer Barriball, a person who always dedicated time to help me and not just even in live meetings but also through Slack the whole time. Another thank you to Prolet in StudentsCare who was a real help answering to my inquiries and helping with giving me the proper prolonging papers when I got sick. And to all the people in CodeInstitue who are working on supporting me and my fellow learners,..Thank you.