Programmer Card

An easy way for programmers to find other programmers, using online business cards. Find your next team, next hackathon, next mentor or your next project and collaborate with others.

Comment

Inspiration

A part of programming is connecting with others and sharing knowledge. Programming can sometimes be a lonely experience, especially when you are learning.

I wanted to create a platform where developers who want to connect with other developers can do so with no hassle. Need a team? Want a mentor? Want to find a hackathon? Make a Programmer Card and post.

The main concept of this project is business cards. A simple and effective way to connect in the physical world, made virtual.

What it does

Programmer Card is a one-stop shop for programmers to find other programmers with an interactive business card system.

  • Sign in with GitHub
  • Create a Programmer Card post
  • Find other posts and connect with other programmers

The goal of Programmer card is to make sure no one goes through their programming journey with no connections. Programmers can expand their networks with ease and create together.

The user can log in with their GitHub (using Next-Auth) and create a post. Each post contains a business card known as a "programmer card". The interactive Programmer card contains the user's name and role. Interacting with the card displays the back of it, showing more information about the programmer. A simple and efficient way to connect.

How we built it

UI Design and Planning

When the hackathon started, I noted down any ideas I had onto a notepad and brainstormed a general concept. After coming up with an idea I liked, I began designing what I would make. Before going into any code, I opened up Figma and made a mock-up of my ideas. I made sure to use a simple colour scheme with a minimal design to allow for accessibility and a visually pleasing experience.

Creating The Pages

I first created the initial concept with vanilla JS, HTML, and CSS. These original files are found in the "Vanilla Programmer Cards" folder in the GitHub Repo. This initial concept gave me a good foundation to continue and develop the project.

Frameworks and More

I went into Saturday with a plan to put it into a framework to handle a database and user authentication.

I went with Next.js as I have been learning JavaScript and React this past month. Next.js would provide me the tools I needed to setup a functioning product. I started by turning my original concept into JSX which challenged my relatively new React skills. I settled with MongoDB and Mongoose to create the database. A schema for the posts and an API route was created. I utilised Postman to test the API, ensuring that POST and GET requests were functioning and working as intended. To handle user accounts and authentication, I incorporated Next-Auth. Next-Auth was used to setup a log in system where the user can join Programmer Card using their GitHub account. This required me to create a GitHub Developer OAuth app.

Hosting

Using a GitHub repository made it easy to host the platform on Vercel for free. I imported the repository into Vercel, set the environment variables then deployed the website.

Challenges we ran into

Fetching from the database and display the content

A major problem that has limited the functionality of my project is GET requests from the MongoDB database. I used Postman to test the API, and GET tests were regularly a success. However, when trying to implement the fetch into my code, I came across many issues.

  • One method that displayed the content did not fulfil the promise, leading to a status 500 error after the initial GET. This meant that the user would load the content in the first time, but if they logged out or refreshed the page, the marketplace would break as it could not fetch anything.
  • The second method would fetch the data, then would overwrite the variable containing it. This lead to an undefined object being passed through to the JSX every time.
  • The last method used useState and useEffect alongside the async functions. This did not work as these hooks are not compatible with async functions.

I had to settle with a static marketplace for this demonstration as I could not fix this issue (after trying to fix it for about 6 hours). However, I will be revisiting this project once I have a better understanding of Next.js and the other technologies I used to provide the website with all intended functionality. For now, the marketplace does not load posted posts from the database and only shows pre-set cards as an example.

Making the card flip over

Another challenge I ran into was making the card flip over. I was able to do it with vanilla JS, however, the same code did not work when I transferred over to react as the tilt.js library changed from vanilla js to react. Due to time constraints, I came up with the compromise of displaying the back of the card under the front of the card with a transform transition. I believe that this still delivered a good user experience with the card.

Accomplishments that we're proud of

I am proud of how much I was able to do with a framework I was very unfamiliar with. I had only started learning React the past week but I knew that trying to create something would be beneficial to my learning. I decided that if I threw myself into the deep end I would come out with a good understanding of the technologies used and I can say that I was correct. I believe that I have gained a greater understanding of what these technologies do and how to use them, which will help propel my learning. Furthermore, I am proud of the design of the website, It is close to the original mock-up and it has a modern and minimal feel to it. I believe that it is easy to navigate and provides the user with a good experience. Most technologies used in this project I had never used before, such as Next.js, MongoDB and Postman. In a short amount of time I was able to use and gain experience with many technologies I had never considered using before. The concept of Programmer Card is a project I am proud of creating. I believe that it has its innovations and provides an intuitive approach to connecting with others.

What we learned

  • How to set up and create a Next.js app, how to create React page with multiple components, and how routing in Next.js works.

  • I have been able to majorly improve my react skills, from almost nothing to being able to create a full web application. While there are many aspects I am not familiar with or did not get to use, I look forward to using them and continuing to improve my React skills.

  • How to set up a MongoDB database with Mongoose and how to test it with Postman.

  • Provide user authentication with a GitHub OAuth application and Next-Auth

  • Hosting on Vercel with a GitHub Repository

Before this, my web framework experience was with Flask and Django, which have some small similarities to Next.js but overall felt very different. It was my first time using an external database that is not local and on my system but is online. It is also my first time setting up my own API and using it to store and fetch data. I was confused as to what it meant to create an API for a web application and now I have a greater understanding of what it is and how to do it.

What's next for Programmer Card

I plan to revisit this project shortly after I gain a better understanding of the tools I have used. I would like to complete the marketplace system and finish the project. I believe that it is a service that many programmers would use. Due to this, I would like to eventually host it with its own domain and let it be a place where programmers can network without the hassle of a separate chat, just linking their main profiles. Who knows, it could be the next big social media app.

Additional features I would like to add, which was part of my original idea, is the ability to customise the card colours and then export it. I think it would be a good idea if the user could embed or use these cards on their websites or other pages. Instead of linking a massive portfolio when they first meet someone, they can just send them a link to this exported programmer card. It would act as a virtual business card. An alternative to this would be to have a profile for the users on Programmer Card where they can share their programmer card via the website.

Git Repo: https://github.com/Loic017/MLH-Hacks-For-Hackers-Hackathon

Built With

Share this project:

Updates