Live site: https://team-1-8284bb86c76b.herokuapp.com/
- 404: Gender Gap Not Found - Inspiring the Next Generation of Women in Tech
Our app is designed to inspire tech innovators by:
- Sharing Stories: Highlighting the key milestones and achievements of women pioneers in technology.
- Providing Tips: Offering handy, practical tips for navigating the tech world.
- Bridging Mentorship Gaps: Connecting mentees with experienced mentors who can guide their professional journeys.
The web app strives to break barriers, close gender gaps, and cultivate a diverse, inclusive community where women can thrive as innovators, leaders, and changemakers. It’s not just about mentorship—it’s about building a stronger future for women in technology.
- General Users: Visitors interested in exploring milestones and biographies of women in tech.
- Students and Learners: Individuals looking for role models and guidance from mentors.
- Authenticated Users: Registered users who access additional features like mentor connections and honoring tech icons.
- Researchers: People seeking inspiration or detailed information about notable figures.
- Administrators: Those managing content such as timeline entries, biographies, and mentor connections.
Retro Vibe: The design features a bold combination of Navy (#000080) and LightSkyBlue (#87CEFA) as seen in the footer gradient, evoking a nostalgic Windows 98 feel.
High Contrast: The dark navbar (bg-gray-900) paired with white text and borders ensures excellent readability on large screens.
Accent Variety: Subtle Silver (#C0C0C0) accents and well-defined hover effects add visual depth without detracting from the retro aesthetic.
The site uses fonts inspired by late 1990’s Web 1.0 aesthetics. In particular:
We used Tailwind built-in fonts, Serif and Mono, designed for readability with elegant letterforms and extensive language support—ideal for biographies.
Based on the user stories, we used Balsamiq to design the wireframes for the main UI, starting with mobile first.
Header and Footer
Wireframes for the site header and footer:
Contact a Mentor
Here are the wireframes for contact form for connecting with a mentor:
Timeline
Here are the wireframes for timeline:
All user stories were logged on the Kanban Project Board on GitHub Projects. We used this board during development and testing to track progress, assign priorities, and log significant bugs.
Below are the prioritized user stories for the current implementation:
| User Stories | MoSCoW Priority | Status |
|---|---|---|
| User-Friendly Navigation and Responsive Design | must have | Done |
| Display Timeline View | must have | Done |
| Header and Footer | must have | Done |
| User Authentication | must have | Done |
| Connect with Mentors | must have | Done |
| Team Page | must have | Done |
| Custom Error Pages | should have | Done |
- Header and Footer: Consistent branding and easy navigation.
- Timeline: A retro-inspired timeline showcasing milestones of women in tech.
- Tips: Practical tech tips to empower users.
- Contact Form: An accessible way for users to get in touch.
- Admin Panel: Secure administration interface for managing content.
- Error Pages: Custom-designed error pages that align with the site’s aesthetic.
- Future Features: We're constantly refining our platform to better serve our community. Upcoming enhancements include more interactive timeline features, advanced mentor matching capabilities, and a wealth of new resources to empower the next generation of tech innovators. Stay tuned for regular updates as we expand our offerings and fine-tune the user experience.
The header of this project is designed with a retro-modern and responsive layout to provide easy navigation across the site, with a touch of 1980s. It includes the following key components:
- The header has a linear gradient that transitions from a dark blue (#000080) to a light sky blue (#87CEFA), giving it a visually appealing look. The text color is white, ensuring good contrast and readability.
- The logo is placed on the left side and links to the home page. It's styled to ensure that it fits well in the header without distorting or overflowing, using a max-w-full and max-h-full approach.
- The horizontal navigation menu is displayed on larger screens (medium and up, md breakpoint) with links to key pages: Home, Timeline, Mentors, Team, Login and Register. These links have hover effects for better user interaction.
- If the user is authenticated, additional links for "Logout" and "Change Password" are displayed. Otherwise, users will see the "Login" and "Register" options.
- On smaller screens, the navigation links are hidden, and a hamburger menu (navbar-burger) appears.
- When clicked, it toggles a dropdown menu (navbar-dropdown) showing the same navigation links as in the desktop version.
- The dropdown menu is styled to appear below the hamburger button with a light background and rounded corners.
-
The footer is styled with a dark blue background (#000080), white text, and a subtle border on top.
-
The text is centered, and the font is set to a monospace style (font-mono), with a small size (text-sm).
-
It includes a copyright notice with the text "404 Gender Gap Not Found - Since 1900", followed by "All Rights Reserved".
-
This footer is fixed at the bottom of the page (mt-auto), ensuring it stays at the bottom even if content above it is not enough to fill the screen.
- The timeline feature is a tribute to the trailblazing women who have shaped the world of technology through their pioneering achievements, starting with the pioneer, Ada Lovelace, often hailed as the world's first computer programmer. It presents an engaging and interactive journey through history, highlighting key figures and their groundbreaking contributions to fields like computing, engineering, game design, web accessibility and more. Each entry includes a snapshot of their life, notable accomplishments and the lasting impact of their work, providing inspiration for users of all ages. By showcasing these remarkable stories, the timeline not only honours these innovators but also encourages future generations to follow in their footsteps and continue breaking barriers in tech.
- The user is invited to know more about any figure by clicking on the Read more button to find out more about each tech icon.
- Users can honors the women featured on our timeline by giving them a heart - clicking on the heart icon.
- User may pick a mentor from the pool.
- If no one suites them then they can use the 'Find a mentor' button to send a message to have one assigned.
- Or Connect with their choose Mentor.
- The system will then try to match the user with a mentor.
The Admin Panel is set up for the admin or superuser to access and update the data in the database.
- We have custom error pages for 400, 403, 404 (example shown) and 500.
- Filter for mentors
- CRUD function for mentors
- Allow users to create their own avatar
| Test Case | Browser Compatibility | Steps to Reproduce | Status |
|---|---|---|---|
| Responsive Navigation Bar (Desktop) | Chrome, Firefox, Edge, Safari | 1. Open the site on a desktop browser 2. Verify nav links are visible and properly aligned |
✔ |
| Responsive Navigation Bar (Mobile - Burger Menu) | Chrome (DevTools), Safari, Firefox, Edge | 1. Open the site in a mobile viewport 2. Click on the burger icon 3. Verify dropdown appears |
✔ |
| Home Page Rendering | Chrome, Firefox, Edge, Safari | 1. Visit the homepage URL 2. Verify the main content (image, text, layout) is rendered correctly |
✔ |
| About Us Page with Team Section | Chrome, Firefox, Edge, Safari | 1. Visit /about/ URL2. Verify team members section displays correctly with images and GitHub links |
✔ |
| User Authentication (Login/Registration Flow) | Chrome, Firefox, Edge, Safari | 1. Visit login and registration pages 2. Submit forms with valid data 3. Confirm redirection to home |
✔ |
| Timeline Page Interaction | Chrome, Firefox, Edge, Safari | 1. Visit the timeline page 2. Interact with timeline elements and honour buttons 3. Verify proper functionality |
✔ |
- W3 markdown testing - clean no errors or warnings.
- Small screen responsive design for Login/Registration Flow minimal padding to ensure an authentic look.
| Source | Outcome |
|---|---|
| lighthouse | 94% - pass |
| Wave | Pass |
| Accessible Web | 96% - pass |
- Lighthouse issue: http insecure due to Cloudinary
- HTML5: For site structure.
- CSS: For styling.
- Python: Provides the site’s core functionality.
- Django: The Python framework powering the app.
- JavaScript: For interactive and dynamic elements.
- node.js
- Git and Github: For version control.
- Heroku: Hosting the web application.
- Whitenoise: Serving static files.
- Cloudinary: Image storage.
- Tailwind CSS: For responsive design.
- FlyonUI: For styling elements like the timeline.
- Tabler: For icons.
- Django AllAuth
- VS Code: IDE for development.
- Balsamiq: For wireframe creation.
- Canva, LogoAI: For logo and design assets.
- Favicon.io: For favicon generation.
- Copilot: AI-powered code assistance.
- Miro: Used for planning and brainstorming
Follow these steps to get the project running on your machine.
git clone https://github.com/tgrey2024/2503-hackathon-team1.git .The trailing
.tells Git to clone into your current directory.
pip install -r requirements.txtCreate a .env file in the project root containing:
SECRET_KEY=<your_secret_key>
DEV=1- SECRET_KEY: any secure random string
- DEV: enables Django’s debug mode for local development
python manage.py tailwind installpython manage.py migrateFor the smoothest workflow, open two terminal windows:
| Terminal | Command | Purpose |
|---|---|---|
| 1 | python manage.py tailwind start |
Watch & compile Tailwind CSS |
| 2 | python manage.py runserver |
Start Django development server |
Once both are running, visit http://127.0.0.1:8000 in your browser to see the app live.
The web app is hosted on Heroku using Eco Dynos and is deployed via the designated GitHub repository.
Deployment Process:
- Log in to your GitHub profile and create a new repository.
- Open VS Code locally, connect to the workspace, and build the MVP.
- Install the web server gunicorn and freeze requirements.
- Create a new Procfile in the root directory specifying gunicorn as the process type.
- Update
ALLOWED_HOSTSinsettings.pyand setDEBUG = Falsefor production. Commit and push these changes. - In Heroku, create a new app using a unique name and the correct region.
- Add necessary Config Vars in the Heroku settings.
- Go to the Deploy tab, connect the correct GitHub repository, and deploy the branch.
- Choose Automatic Deploy for seamless updates.
- Verify the deployed site using browser developer tools.
- In the app's Resources tab, confirm Eco Dynos are in use and remove unnecessary add-ons.
- Future changes should be pushed to GitHub and deployed on Heroku accordingly.
If you'd like to contribute, fork the repository on GitHub by clicking the "Fork" button at the top-right of the repository page. This creates your own copy of the repository where you can work independently. Once you’ve made your changes, you can submit a pull request to merge your work into the main project.
To clone the repository locally:
- Navigate to the repository on GitHub.
- Click the green "Code" button and copy the URL.
- Open your terminal and run:
git clone https://github.com/tgrey2024/2503-hackathon-team1.git
- 98.css Used as inspiration for the site style
- W3 Schools Excellent Reference
- TailwindCSS The source of all styling across site
- FlyonUI A source of several components used throughout the site
| Team Member | Github link |
|---|---|
| Kiree Bellamy | github.com/Swewi |
| Debbie Thompson | github.com/debbiect246 |
| Linus Johansson | github.com/j0hanz |
| Ashwinkarthik Selvaraj | github.com/ashwinsel |
| Vital Nsengiyumva | github.com/Vinsengi |
| Tripta Grey | github.com/tgrey2024 |
Many thanks to Code Institute and the facilitators, and our families for allowing us the time and space to attend the Hackathon.