GitStack: Deploy in a Click

Skip setup overhead. Enjoy painless FullStack configurations

Comment

Inspiration

As long time programmers and hackathon enjoyers, we find one of the most repetitive yet crucial aspect of web development to be the initial configuration of the GitHub and its frontend and backend frameworks. Even with experience, getting projects started takes time and making mistakes could cause an even greater time drain. This is especially impractical when doing hackathons! Thus, we wanted to create a website that would allow us to conveniently setup web project for us. How convenient? With just a few clicks!

What it does

GitStack lets the user select one of two frontend frameworks: React and Angular, then one of two backend frameworks: Node.js and Flask. With these selected, the user then enters a Vercel API key which will automagically deploy their repository to a Vercel cloud instance. Our algorithm selects the optimal configuration based on the user selection by deploying a GitHub Actions file to a newly-created repository using the GitHub API, which then pulls from the template repositories that we've created and commits those files to the new repository. This makes it so that the user always has the newest starter project available!

How we built it

Our website is hosted using a domain graciously provided by GoDaddy, on Vercel. The frameworks we've used are:

  • React for the frontend
  • ExpressJS for backend Some tools and/or platforms we've used:
  • GitHub Actions & REST API
  • Vercel & REST API

Challenges we ran into

Some of the challenges we've ran into are mostly authentication related, especially with GitHub. Because of the design of GitHub's API tokens, it became quite difficult to troubleshoot why some requests worked, but others did not. We had to jump through quite some hoops to get it working as we wanted.

We first created a GitHub App, but because of a lack of concrete documentation related to accessing the API for our use case, we did not know that we had to install the GitHub App on our account in order for it to have access to our repositories (which means that it could also create repositories).

Accomplishments that we're proud of

We are very proud of having learned to successfully automate repository creation and commit on GitHub using their Actions platform as well as their REST API. We're also really happy that we were able to get Vercel authentication working successfully, thus proving that end-to-end automation is possible through our project.

What we learned

  • The benefit of thorough project planning, as the development of this project went significantly more smoothly than last year's: project concept, expectations, phases, plan Bs were discussed beforehand, clear roles were defined (especially at the first hours).
  • Great time management and role distribution: throughout the project, everyone knew what they were doing as we made a Kanban board to track issues and pain points. Every couple of hours, we would do mini stand-ups, which made sure that all information was communicated correctly to everyone involved, thus speeding up the overall development process.

What's next for GitStack: Deploy in a Click

Our project has a lot of potential to grow. The following features could be added:

  • More frontend and backend stacks (ex: Django for the former, Vue.js for the latter).
  • The ability to select different cloud infrastructure providers (ex: Vercel, Heroku, Netlify).
  • The option to obtain files locally instead of always creating a GitHub repo.
  • AI suggestions based on the selected frameworks.
  • AI text recognition to setup a project with one text prompt. Also, currently, the Vercel API key is submitted directly through a textbox, which obviously raises security implications.
Share this project:

Updates