A Django full-stack web application designed to provide information, resources, and community features for those affected by Turnpenny-Fry Syndrome (PCGF2). The site includes informational pages, a discussion forum, and liked comment functionality for authencated users.
The PCGF2 website was developed to create an online hub for individuals and families affected by Turnpenny-Fry Syndrome. It aims to:
- Provide accurate, accessible medical and community information.
- Foster interaction via a secure forum for families and people with PCGF2 and medical professionals.
- Enable registered users to share experiences, comment on posts, and ask questions.
The project is built using Django, following an MVC (Model-View-Controller) pattern, with HTML, CSS, and JavaScript for the frontend.
-
Clone the repository
git clone https://github.com/yourusername/pcgf2.gitcd pcgf2 -
Create and activate a virtual environment
python -m venv .venvsource .venv/bin/activate# Mac/Linux.venv\Scripts\activate# Windows -
Install dependencies
pip install -r requirements.txt -
Apply migrations
python manage.py migrate -
Create a superuser
python manage.py createsuperuser -
Run the development server
python manage.py runserver
-
Access the site at:
http://127.0.0.1:8000/ -
Register or log in to create and interact with forum posts.
-
Use the Django admin panel at:
http://127.0.0.1:8000/admin/ -
Run all unit tests with:
python manage.py test
For my intial planning I took and agile approach with staring out planning out user stories each with acceptance criteria and tasks to complete to reach my mvp and beyond.
Kanban board Screenshot
Secondly I created the wireframes of what i wanted the rough layout to look using Balsamiq. I planned for the layout of Home, Forum, Profile , sign-in and sign out pages. The About page wasn't planned since I hadn't gathered the text that would be the content at the time, however I knew it would simply be mostly a block of information text on PCGF2.
Colour palette was developed for both light and dark mode in mind and was adjusted to create suiable contrast for accessability.
Final part of my pre-production was laying out my ERD with Lucid Chart
ERD Chart
Use of AI: Throughout all of the pre-production process NO AI was used.
Writing of the code started off well with my intention of not using AI as much as possible, html pages and basic model, url and views files started off well till I came accross error codes I could'nt decypher then I would used Chat GPT to explain and work out error codes for me and susgest fixes without outright writing code for me.
By the end of week 2 I was running out of time and the error codes kept comming, every issiue I would fix would create 5 more and my site was just pages of 500 errors. So in the last few days of coding I decided to ignore developing the profile page and focus on the forum and CRUD functionaility without endless 500 errors.
Despite by despriate final sprint working with AI to fix my back end functionailty I'm happy to say that little to no AI was used in the front end development. HTML, CSS and JS was written entirely by me with Chat GPT fixing my silly django errors in my HTML when fixing my back-end.
Home Page
About Page
Forum Page
Post Details Page
Profile Page
Edit & Delete Page
Uint tests and results
- Test 1 forum page loads for logged in user
- Test 2 if logged in user can create posts
- Test 3 if unlogged in user can create post
- Test 4 if detail page for posts load with logged in user
- Test 5 if logged in user can comment on detail page
- Test 6 if unlogged in user can comment
- Test 7 post like system
- Test 8 comment like system
- Test 9 if user can edit their own post
- Test 10 if user can edit others posts
- Test 11 if user can delete their own post
- Test 12 if user can delete others posts
- Test 13 if user can edit their own comment
- Test 14 if user can edit others comments
Lighthouse tests do bring up errors but I didn't have the time to address them
About page
Forum page
Post details page
Profile page
Due to my intial reluctance to use AI from the start of the project mainly for my own learning purposes, which I definely benifited from but it did slow production down. However here is a list of future features for me to work on if I ever get around to it:
- Compelete profile page
- ability to add and edit:
- profile picture
- bio
- relation to PCGF2 from drop down
- Gallery of uploaded photos
- Feed of users posts
- ability to add and edit:
- Ability to search on the forum for users and view their profile pages
- Ability to search on the forum for previous posts to see if simular issiues have been raised.
- Better pop ups for UX confimation
- Email notifications
- Ability to customise Fourm feed with filters and choose who to follow.