Table of contents
About
This is a portfolio project that was made in 2 weeks for my Full Stack Software Engineering course at ALX. The main goal of GitCraft is to offer GitHub users a free alternative to showcase their skills by generating templates populated by a user's GitHub data and statistics. The user will have the opportunity to download the template and host it on their platform of choice. As of now, these templates consist of 3 portfolio websites. More template customization options and types are in the works such as GitHub readme's and CV's.
Links
Website hosted on Google Cloud: https://gitcraft.bradleygilden.tech/
Website hosted on Koyeb: https://gitcraft1-alx.koyeb.app/
GitHub repository for Usage and Deploying your own instance: https://github.com/BradleyGilden/GitCraft
Connect with me
twitter: https://twitter.com/comascript
Project Timeline
Below is a Gannt chart of the project development up until its deployment
Roles
Since I was the sole developer, I was responsible for:
Backend Design & Development
Frontend Design & Development
Testing & Quality Assurance
Documentation
Inspiration
Before I decided on my project, I set a series of criteria for its conception.
I wanted to make a project that was unique to my portfolio. Something that you don't just find on a quick Google search like an e-commerce website, a to-do app or a blog.
The project had to be completely free to develop and for users to access. I set this as a goal because as a student myself, I know how hard it is to make financial commitments to multiple subscription services.
The product had to be successful in all the core functionalities I decided to implement before the project deadline
No Novelties. I wanted to make something that people would use instead of it being a cool demonstration.
Using these criteria I eventually found myself experimenting with GitHub's API, because it was the most accessible API free of charge, with the most documentation and content out of all the free options I had researched. After browsing documentation and looking at the type of data accessible through the API, I thought it could be easily used in a lot of media such as portfolio websites. This was the birth of GitCraft.
System Architecture
Backend Architecture
Flask: Flask was chosen because, at the time of development, I had just learned the framework and was looking to use a framework that I was comfortable with. Flask was used to communicate with the front end (client). All data that was populated on the website and dynamic templates using Jinja.
MongoDB: This NoSQL database was chosen because my application did not require complex relationships and it was compatible with both Python and Flask. Even though I had no prior knowledge of MongoDB it was easy to pick up. MongoDB was used to store user login details as well as customization settings data.
Frontend Architecture
CSS: Used Custom Styling Options on dynamic templates and the website.
Bootstrap: A CSS framework used to speed up styling by using predefined classes. It also makes it easier to design responsive websites, which allows 2 of the 3 generated templates to be responsive.
JavaScript: Used to communicate with the back end (requests to get, update, and add data). Controls The navigation of pages and the user's general interactions with content on the website.
3rd Party Applications
Chart.js: Used to Create Charts for Viewing a GitHub account space allocation
SweetAlert2: Used to create custom alerts for significant events such as signing up and warnings.
Features
Dynamic Template Generation
This is the main feature of the website. It uses a user's GitHub token, which they signed up with, to dynamically generate portfolio website templates with their GitHub data. This data can range from user name, contribution count and social accounts to pinned project details.
Monitor Account
Using the GitHub dashboard, you can monitor what is occupying space and how much is remaining. You can also check rate limits that the Rest API and GraphQL API deplete as well as commit statistics.
Customized Settings
GitCraft allows you to alter GitHub profile settings such as bio and display name which are used in template generation. It also allows custom settings that are not accessible via GitHub's API such as preferred languages and frameworks.
Technical Challenges
Familiarising with documentation:
Because some of the tools and libraries I used were new to me, it took a while to read through the documentation to find what I needed.
GitHub's GraphQL API:
Even though I have previous experience with REST APIs, this was my first time using GraphQL, which I had to learn during development as GitHub's REST API does not provide many features supported by its GraphQL API.
Deploying and Hosting:
One of the main features of the website is to download templates. When I had included this feature, the initial hosting platform I had chosen, pythonanywhere.com, had restrictions for this feature which made it impossible to host it on the platform. I had opted for the Google Cloud platform's free credits upon initial registration, but the credits have an expiration of 3 months, so the website could not remain truly free. I eventually stumbled upon Koyeb, which allows a free tier with limited storage and regions only, but as of now, there is no time limit.
Takeaways
Building this project has taught me a lot about what it takes to design and integrate back-end and front-end development. This is important for my goal as a full-stack engineer as I love the creativity that comes with front-end and the problem-solving of back-end.
