Final Project...Do It Scared.

I completed the first phase of a nine-month web development fellowship, and though my technical skills are not nearly as sharp as I envision them to be in my brilliantly creative mind, I am quite proud of what I've been able to learn, understand and accomplish under such a short period of time. (Ask me 3 months ago to explain what Big O Notation and recursion is, and I would have looked at you like you were loca!)

💎: Even though there are days where I feel like I'm in over my head, I do it scared.

As one of the older 'life-seasoned' fellows in my bootcamp cohort who is pivoting from a non-technical career in event management in my mid-thirties, during a global pandemic, one could imagine the amount of effort it takes to drive this pervasive "imposter syndrome" out of my mind. It is my mission to share nuggets of widsom, lessons learned and the wins of overcoming adversity while I navigate this career transition.

During our final week of this phase, we were grouped in pairs and tasked to build a mobile-responsive web application using Vanilla JavaScript, HTML and CSS, and utilizing four endpoints from an API of our choice. We chose QuoteGarden API.

I was lowkey mortified that I would be paired with someone who would completely uncover my fear of being a fraud, but thankfully that was NOT the case.

💎: Sometimes you have to quiet the fears in your mind, and let them instead, inspire you.

👨🏾‍💻Phase 1 Project

Quotivate is a thought provoking mobile responsive web app that encourages users to explore through more than 75,000 motivational quotes in a visually appealing manner.

Whether it's classic historical philosophers and leaders, or modern day entrepreneurs, pop icons and influencers, we feature quotes from the most brilliant minds in motivation, sports, philosophy, and everything in between.

🤓Inspiration

We noticed that there is a lack of visually appealing motivational quote websites and apps on the Internet, and for this project we were inspired by the beautifully designed Google Chrome Extension Momentum.

Here is our final presentation and demo:

🏢Structure

• We had only 2 short weeks to ideate, test our API, wireframe and build this web application, and so we decided on a simple MVP that would allow users to 4 methods of searching for quotes.
• To keep us on task, I created an Agile Trello Board to keep track of our progress during the project build.

👨🏾‍🎨UI/UX

• Since my graphic and visual design skills are much stronger than my technical programming skills, I researched and designed a visually appealing UI and branding for our project using Figma and Canva.

Here are the first iteration wireframes in Figma;

Here is a mockup of the landing page;

👿Challenges

• The day before final presentations, my coding partner realized our deployed site was no longer connecting to the API. Upon further investigation, we realized that the developer of the API, who is based in India, was actively updating to a new version and pushing changes the exact same weekend! After many frantic tweets, DM's and emails to the developer to figure out how to refactor our code, we were able to get it to work in the nick of time.
• We wanted to use a framework for CSS to style the site and cards, but found that Tailwind CSS had a bit of a high learning curve for us in such a small amount of time, so we used Bootstrap instead.
• Battling major imposter syndrome as my JavaScript and coding skills were not as strong as was needed, and I was not technically able to contribute as much as I would have liked in coding out the components for this project.

🧠Thought Process and Lessons Learned

This project helped me to gain more knowledge in accessing Rest API endpoints and testing using tools like Insomnia and PostMan, as well as practice with ES6 syntax, and using CSS Bootstrap to make the wireframes come to life.

While I was battling my own internal imposter syndrome and dilemma of feeling like "I could be doing more", my coding partner was vital in building my self-confidence in my existing creative abilities and contributions, and in our peer coding, thoroughly explained the formatting and structure of the codebase as we were building it.

🚀Deployment && Future Plans

• We have successfully deployed our project via Netlify, and it can be accessed via our Github Repo

  Shnaeem / Quotivate

  

  QUOTIVATE

  🤷🏾‍♂️What is Quotivate?:

  Quotivate is a thought proviking mobile responsonsive web app that encourages users to explore through more than 75,000 motivational quotes. Users can discover new and exciting quotes randomly by pressing the "Surprise Me" button on the main page, or they can do a search by various parameters. The quotes are displayed on beautiful mobile responsive cards, and include the quote text and the author.

  📲Features:

  • User will see a Quote of the day on the home page
  • User will be able to search/generate a random quote
  • User will be able to search by genre
  • User will be able to search by keyword
  • Responsive layout

  💻Live Demo Instructions:

  Instructions/steps to use the web application,

  • Step 1: Click "Surprise Me" to generate a random quote card on the homepage.
  • Step 2: Select any options on the navbar to search for quotes.
  • Step 3: Click on the…

  View on GitHub
• This is our MVP version built in Vanilla JS, however we are currently learning React JS and React Native, and will likely rebuild the entire project using React hooks, stylized components, and Tailwind CSS.
• We also have some great ideas about expanding on features by offering language options, and making the quotes social media friendly.

In conclusion, I want to encourage others at the beginning of their coding journey to "do it scared anyway".

I will keep it 💯 with y'all that working on building this project, there were many days and many moving pieces that I did not know what to do or how I was going to get it done, but with an excellent partner, and a supportive learning community of peers and instructors, we were able to build a beautiful final project.

💎: Start before you feel ready... otherwise you'll always be waiting because you'll never feel ready.

✌🏾👨🏾‍💻

Comments

[Jason C. McDonald]

The day before final presentations, my coding partner realized our deployed site was no longer connecting to the API. Upon further investigation, we realized that the developer of the API, who is based in India, was actively updating to a new version and pushing changes the exact same weekend!

Yiiiiiiiiiiiikes! Well done overcoming that hurdle.

Start before you feel ready... otherwise you'll always be waiting because you'll never feel ready.

Right on.

[blaquebeardcoder]

Appreciate you taking the time to read and comment. Such a great learning experience.

[Quiana Berry]

Yay, congrats on your publish & project, super organized, raw and real come up story!

[blaquebeardcoder]

Awesome Quiana, thanks for taking the time to read and share!

[J3ffJessie]

Major props, you tackled a hurdle that a lot of people won’t experience likely ever in their career. You had to spot change your code by contacting the API developer and find a way to make sure your code still worked. That is awesome. Be proud of yourself. You aren’t a fraud, your learning and building amazing stuff.

[blaquebeardcoder]

Appreciate your feedback and encouragement!

[Kudos Beluga]

Start before you feel ready... otherwise you'll always be waiting because you'll never feel ready.

So true!