As a group of inspiring web developers it can be difficult to set yourself apart when you are first searching for a job. We wanted to create an app that can showcase the skills we have learned over the course of our Bootcamp, is also a professional looking website and that can be useful for web developers to use!
- How to Start
- Recommendations
- Contributors
- Built With
- Photos
- Difficulties & Solutions
- For the Future
- License
Once the user comes to our homepage they will be able to navigate to the sign in page. If they are an existing user they can re-sign in, or at the bottom of the form the user can create a log in with an email and password.
After a user has logged in they will navigate to the studio page where the user will be prompted to fill in information which will be populated onto the business cards.
Once the user chooses a template they like they will be navigated to a page where they can print out their business cards.
We advise before you print your business cards that you use a good quality card stock in the printer to ensure the best looking business card.
The website input is what is going to be linked to the QR code so your business card can be scanned. It is best in your browser window to go to the website you wish to enter and copy the URL in the URL line and paste it into the form where it says Website.
On the form that populates your business card on the website input section it would be best to either add in your Github profile page, LinkedIn Profile, your deployed portfolio page, or your most impressive App you have worked on.
When you get to the PRINT screen you may need to check a box in the more options menu and add in background graphics so the whole card renders.
- Gabriel Mangum's - GitHub
- Jean Tubay's - GitHub
- John Parker Hodges' - GitHub
- Michael Trpak's - GitHub
As with any project there are always going to be difficulties that arise. We wanted to generate a QR Code that the user could link to a website of their choice. We found a 3rd party API that we can generate a QR Code with. The next issue we had with it is we needed to encode the URL so that it would talk with the API properly. There is a handle function with Javascript (encodeURIComponent()) that handled that for us.
We wanted to have two separate forms between the user sign in and the info form which populates the business cards so the user can login and create many business cards all with different information on them. With that we needed the two to talk to each other so the information is linked. We used associations in MySql to join them with the user Id so that one user can have multiple form card entries.
One major time suck in this App was creating the cards. We strived to have four unique business card templates for which the user can choose from. To accomplish this we needed to create a small and large version of each template and also 4 dummy cards which can be viewed from our homepage. With using components in React it made it easier to handle the boilerplate of the cards, but it still look a lot of trial and error to get the styling to look better on the cards.
In the future we would love to add a feature where once they choose a template and go to the print page screen that it also downloads a pdf file of it so they can save and store their business cards for later and print it when it is convenient for them.
We would like to implement a save card feature where they can view all of their created cards in their user dashboard so they can scroll through all of their different cards.
At the beginning of the project we contemplated using a drag and drop feature to edit your business cards. It would be a nice fancy feature to have in the app if we could find a way to use drag and drop within our App.
This project is not under license