This project was made for the April Hackthon - "Unmask The Coder" by Code Institute.
It aims to show users that they have good skills and to help dealing with Imposter Syndrome.
The idea for the project came from one of the members and was consistent with the suggested projects by CI - Hack Team.
Incorporating more than one idea of those suggested.
🌐 Live site: Boost.dev
Imposter Syndrom: Article about infinite learning and imposter sysndrome
- Boost.dev
- Documentation
- Ux - User Experience
- Project Planning
- Technologies Used
- Deployment
- Bugs to fix
- AI Implementation and Orchestration
- Testing
- Future Features
- Credits
Boost.dev is a simple site with information about Imposter Syndrome that many developers can go through with different symptoms, and it aims to provide information about this subject and also present ideas about how the user can try to overcome this.
It's meant to be an interactive and responsive site.
- Users have access to posts related to the main subject
- Users can do coding challenges in different levels
The site is designed to be responsive in different screen sizes.
Our main goal is to let the user know that they are great developers and hopefully to let them improve their confidence with coding and to help others in similar situation, creating a supporting community for developers that have low-confidence.
Comprehensive Technical Documentation Available
For developers, system administrators, and contributors, we provide detailed technical documentation covering all aspects of the project:
Quick Start for Developers: Start with the Project Summary for a 5-minute setup, then dive into the Development Guide for detailed instructions.
This project was inspired in 2 sites:
Fiirst site was known to one of the members of the group and the second is a template made by the same member about Imposter Syndrome.
As the look seemed well put and a great start, the steam thought about taking this idea and changing it with inspiration also on "daily.dev" for the main site after the user registers or logs in the site.
We took the same name, and developed a different landing page and worked on the main site, providing some information for the user even before he registers on the site.
We opted for a simple and minimalistic layout and logo and to focus more on the content to get the attention for the issue that the "Imposter Syndrome" can present to the user and hoepfully make him/her feel encouraged to register, improve his/her confidence, as well as to try to overcome it and help others while also improving his/her skills.
Following the initial idea from our colleague, we used similar colours to the ones used on "boost.dev" and adapted as necessary for better contrast, tryin gto keep it simple.
Colours - checked against WCAG for contrast
#581CA0 - Purple (from the canva mind map)
#312fa6 - Indigo
#b12e5d - Roseberry
#0088cc - Bright blue
#121212 - Dark background
#ffffff - White
| Colour | WCAG Ratio (against #121212) | WCAG Contrast |
|---|---|---|
| Purple | Pass (7.1:1) | ✅ AAA |
| Indigo | Pass (8.23:1) | ✅✅ AAA |
| Roseberry | Pass (6.71:1) | ✅✅ AAA |
| Bright Blue | Pass (6.95:1) | ✅✅ AAA |
Fonts used for this website were:
The main goal for this project was to create a site that feels friendly, invitting and can provide users the feeling that they are good developers, although they might not see themselves in that way.
- User-friendly platform to post artwork
- Appealing and minimalistic layout and colors
- Show simple and easy to select menus
- Ensure consistent UX thoughout multiple platforms, as mobile devices, tablets, and desktops
- Develop a platform that can be improved with new features in the future
Boost.dev was the first hackathon with people from different courses for one of our members and a review for the rest of the group, although in the begining we started getting roles, during the project, each one of us got to manage and push the others at different times, with discussions about different features happening throughout the process and all members having the opportunity to express their views.
Issues and features can be seen on GitHub Project Board.
With each iteration of the Agile methogologies, the website was improved and we did our best to improve our skills and knowledge of the project management, which we had used in previous projects, but that can always be improved.
These will also be very important for future projects, either personal or professional, with Hackathons being a great way to also get more practice with Agile methodologies.
User Persona 1: Alice - The Aspiring Developer
Age: 22
Occupation: Computer Science Student
Experience Level: Beginner
Goals:
- Learn coding best practices and improve her programming skills.
- Build confidence in her abilities as a developer. Connect with a supportive community of developers.
Challenges:
- Struggles with imposter syndrome and doubts her skills.
- Finds it difficult to stay motivated without external encouragement.
- Overwhelmed by the vast amount of online resources.
How Boost.dev Helps:
- Provides beginner-friendly coding challenges to help her practice.
- Offers a supportive community where she can share her progress and seek advice.
- Features articles and resources to help her overcome imposter syndrome.
User Persona 2: Ben - The Mid-Level Developer
Age: 30
Occupation: Frontend Developer at a Startup
Experience Level: Intermediate
Goals:
- Sharpen his coding skills and learn new technologies.
- Showcase his personal projects to gain recognition.
- Mentor junior developers and give back to the community.
Challenges:
- Wants to transition into a full-stack role but lacks backend experience.
- Feels stuck in his current role and wants to grow professionally.
- Struggles to find a platform to share his work and get feedback.
How Boost.dev Helps:
- Provides intermediate-level challenges to expand his skill set.
- Allows him to showcase his projects and receive constructive feedback.
- Offers opportunities to help beginners and share his knowledge.
User Persona 3: Clara - The Experienced Mentor
Age: 40
Occupation: Senior Software Engineer at a Tech Company
Experience Level: Advanced
Goals:
- Mentor and inspire the next generation of developers.
Challenges:
- Limited time to contribute to open-source projects or mentor in person.
- Wants to find a platform where she can make a meaningful impact.
- Needs a way to share her expertise without overwhelming her schedule.
How Boost.dev Helps:
- Provides a platform to mentor developers through forums and discussions.
- Helps her stay connected with the developer community and trends.
Initial wireframes for desktop view as follows:
The initial concept was based on:
After the initial concept was drawn, the team decided to use a navbar on the top that changes to a "hamburger" dorpdown menu on smaller screens.
Background image is an edited version of Ubuntu OS background page
Other images searched on Google and adapted to use on the webiste, include:
Some of the features that can be seen on the website are:
An area where the user can do challenges created by AI and APIs with different levels of difficulty:
A space to engage with the community:
Landing page with information about Imposter Syndrome and Strategies to try to overcome it, also hopping the user will want to register on the site and get support and improve himself and maybe help other developers in a similar situation:
Recent challenges doneby the user for other users to see:
Area where the user can post wins achieved on that day or previously:
An intuitive navbar with the main areas that the user can access:
Area with different resources related to Tech:
To begin this project from scratch, you must first create a new GitHub repository using the Code Institute's Template. This template provides the relevant tools to get you started. To use this template:
- Log in to GitHub or create a new account.
- Navigate to the above CI Full Template.
- Click 'Use this template' -> 'Create a new repository'.
- Choose a new repository name and click 'Create repository from template'.
- In your new repository space, click the purple CodeAnywhere (if this is your IDE of choice) button to generate a new workspace.
Install Django and supporting libraries:
- pip3 install 'django<4' gunicorn
- pip3 install dj_database_url psycopg2
- pip3 install dj3-cloudinary-storage
Once you have installed any relevant dependencies or libraries, such as the ones listed above, it is important to create a requirements.txt file and add all installed libraries to it with the pip3 freeze --local > requirements.txt command in the terminal.
Create a new Django project in the terminal django-admin startproject ems .
Create a new app eg. python3 mangage.py startapp events
Add this to list of INSTALLED_APPS in settings.py - 'booking',
Create a superuser for the project to allow Admin access and enter credentials: python3 manage.py createsuperuser
Migrate the changes with commands: python3 manage.py migrate
An env.py file must be created to store all protected data such as the DATABASE_URL and SECRET_KEY. These may be called upon in your project's settings.py file along with your Database configurations. The env.py file must be added to your gitignore file so that your important, protected information is not pushed to public viewing on GitHub. For adding to env.py:
- import os
- os.environ["DATABASE_URL"]="<copiedURLfrom postgresql://neondb_owner>"
- os.environ["SECRET_KEY"]="my_super^secret@key"
For adding to settings.py:
- import os
- import dj_database_url
- if os.path.exists("env.py"):
- import env
- SECRET_KEY = os.environ.get('SECRET_KEY') (actual key hidden within env.py)
Replace DATABASES with:
DATABASES = {
'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
}
Set up the templates directory in settings.py:
- Under BASE_DIR enter TEMPLATES_DIR = os.path.join(BASE_DIR, ‘templates’)
- Update TEMPLATES = 'DIRS': [TEMPLATES_DIR] with:
os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR, 'templates', 'allauth') - Create the media, static and templates directories in top level of project file in IDE workspace.
A Procfile must be created within the project repo for Heroku deployment with the following placed within it: web: gunicorn ems.wsgi
Make the necessary migrations again.
Cloudinary provides a cloud hosting solution for media storage. All users uploaded images in the FreeFid project are hosted here.
Set up a new account at Cloudinary and add your Cloudinary API environment variable to your env.py and Heroku Config Vars. In your project workspace:
-
Add Cloudinary libraries to INSTALLED_APPS in settings.py
-
In the order:
'cloudinary_storage',
'django.contrib.staticfiles',
'cloudinary', -
Add to env.py and link up with settings.py: os.environ["CLOUDINARY_URL"]="cloudinary://...."
-
Set Cloudinary as storage for media and static files in settings.py:
-
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
To start the deployment process , please follow the below steps:
-
Log in to Heroku or create an account if you are a new user.
-
Once logged in, in the Heroku Dashboard, navigate to the 'New' button in the top, right corner, and select 'Create New App'.
-
Enter an app name and choose your region. Click 'Create App'.
-
In the Deploy tab, click on the 'Settings', reach the 'Config Vars' section and click on 'Reveal Config Vars'. Here you will enter KEY:VALUE pairs for the app to run successfully. The KEY:VALUE pairs that you will need are your:
CLOUDINARY_URL: cloudinary://....
DATABASE_URL:postgres://...
DISABLE_COLLECTSTATIC of value '1' (N.B Remove this Config Var before deployment),
PORT:8000
SECRET_KEY and value -
Add the Heroku host name into ALLOWED_HOSTS in your projects settings.py file -> ['800-nielmc-django-project-lxqprmm3qz.us2.codeanyapp.com', '.herokuapp.com', 'localhost', '127.0.0.1'].
-
Once you are sure that you have set up the required files including your requirements.txt and Procfile, you have ensured that DEBUG=False, save your project, add the files, commit for initial deployment and push the data to GitHub.
-
Go to the 'Deploy' tab and choose GitHub as the Deployment method.
-
Search for the repository name, select the branch that you would like to build from, and connect it via the 'Connect' button.
-
Choose from 'Automatic' or 'Manual' deployment options, I chose the 'Manual' deployment method. Click 'Deploy Branch'.
-
Once the waiting period for the app to build has finished, click the 'View' link to bring you to your newly deployed site. If you receive any errors, Heroku will display a reason in the app build log for you to investigate. DISABLE_COLLECTSTATIC may be removed from the Config Vars once you have saved and pushed an image within your project, as can PORT:8000.
A local clone of this repository can be made on GitHub. Please follow the below steps:
- Navigate to GitHub and log in.
- Kids Art Repository can be found at this location.
- Above the repository file section, locate the 'Code' button.
- Click on this button and choose your clone method from HTTPS, SSH or GitHub CLI, copy the URL to your clipboard by clicking the 'Copy' button.
- Open your Git Bash Terminal.
- Change the current working directory to the location you want the cloned directory to be made.
- Type git clone and paste in the copied URL from step 4.
- Press 'Enter' for the local clone to be created.
- Using the pip3 install -r requirements.txt command, the dependencies and libraries needed for FreeFido will be installed.
- Set up your env.py file and from the above steps for Cloudinary and NeonSQL, gather the Cloudinary API key and the Neon SQL url for additon to your code.
- Ensure that your env.py file is placed in your .gitignore file and follow the remaining steps in the above Django Project Setup section before pushing your code to GitHub.
A copy of the original repository can be made through GitHub. Please follow the below steps to fork this repository:
- Navigate to GitHub and log in.
- Once logged in, navigate to this repository using this link Eventia Repository.
- Above the repository file section and to the top, right of the page is the 'Fork' button, click on this to make a fork of this repository.
- You should now have access to a forked copy of this repository in your Github account.
- Follow the above Django Project Steps if you wish to work on the project.
These instructions will guide you through setting up Tailwind CSS in your Django project using django-tailwind.
- Node.js and npm installed. You can download them from https://nodejs.org.
-
Install django-tailwind:
pip install django-tailwind==4.0.1
-
Initialize Tailwind CSS for your app (replace "theme" with your app name if different):
python manage.py tailwind init --app-name theme
-
Add
tailwindand your app toINSTALLED_APPSinsettings.py:INSTALLED_APPS = [ ... 'tailwind', 'theme', ]
Also, add
TAILWIND_APP_NAME = 'theme'to yoursettings.pyfile. -
Install the npm dependencies:
python manage.py tailwind install
- Celebrations on the wins not working, allthough the logic looks good.
The GitHub Copilot extension was installed in our local versions of Visual Studio Code.
We were able to write prompts or highlight functions in pseudocode and ask Copilot to suggest code snippets.
We had to review suggestions before they were included, as AI can generate code that can refer to different features than the ones intended.
We also used deepseek, Gemini and Claude to help with code generation.
Regularly used the AI sites and tools mentioned above for debugging code using the inline editor and also prompting to on VS-Code side chat to request changes to the site and content for the site.
When needing to make more complicated changes to code or part of a page, the different AI sites were used to help fixing them and these were generally tested before pushing to repo, making it most of the times quicker to fix the code or create new code.
Overall It was useful to work with Copilot and have help to build many parts of the site.
AI was also a good help to debug and test the code.
Copilot and other AI as Claude in different ways, have explained the different steps involved in the coding, why some code is better than another.
Sometimes it can be furstrating to get some suggestions with ghost code that is not needed for the page to work well or changing different pages/files instead of only 1 ir 2 lines of code to fix a bug, but with testing, errors can be fixed.
Generally, adapting the prompts to make the request specific and concise can help Copilot to give better suggestions to get new features and to improve the site.
Comprehensive validation of HTML/CSS, Lighthouse Audits, and manual testing across multiple devices and browsers.
Used W3C Markup Validation Service to test the HTML on all webpages and updated as needed. No errors found after fixing as can be seen on the examples bellow.
Details
Used W3C CSS Validation Service to test CSS style and no errors found.
Used Chrome Dev Tools Lighthouse to audit the site for response time and accessibility, as you can see onm the examples bellow.
Details
Website manually tested on the following devices/browsers for responsiveness:
- Google Chrome
- Mozilla Firefox
- Opera
- Vivaldi
- Samsung Galaxy A40
- Google Pixel 8
- iPhone 16
- iPad
- Samsung Galaxy
🚀 Planned Enhancements
- User Projects Showcase - Gallery for users to display their coding projects
- Interactive Code Editor - In-browser IDE for running and testing code solutions
- Real-time Code Collaboration - Pair programming features for community challenges
- Advanced AI Mentoring - Personalized learning paths based on user progress
- Code Review Bot - Automated code quality feedback and suggestions
- Smart Challenge Generation - AI-created challenges based on user skill gaps
- Mentorship Program - Connect experienced developers with beginners
- Study Groups - Virtual coding sessions and group challenges
- Developer Blog Platform - User-generated content about overcoming imposter syndrome
- Progress Analytics - Detailed insights into learning patterns and growth
- Skill Assessment - Comprehensive evaluation of coding abilities
- Career Path Guidance - Personalized recommendations for skill development
💡 Want to contribute? Check our Development Guide for contribution guidelines!
Website was inspired on the "Blog" walkthrough project by Code Institute Bootcamp LMS using HTML, CSS, Javascript, Django, Python and other extra tools to allow the user to be able to login into the page without having to use the admin panel.
This was a tough hackathon as 2-3 members of the initial group left in the begining or did not contribute for the project, with the Hack Team being aware of this, and the 3 remaining members had to push hard and motivate each other to continue the project.
It was a fun experience, with everyone learning something new in different ways, great communication and motivation.
This website was created by a collaborative team of Code Institute students:
We welcome contributions! Please check our Development Guide for:
- Setup instructions
- Coding standards
- Contribution guidelines
- Code review process