Final Project...Do It Scared.
Tags: codenewbie, beginners, javascript, bootcamp
Published: 2021-01-25 19:21:43

I completed the first phase of a nine-month [web development fellowship](https://www.theknowledgehouse.org/apply/), 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](https://quotivate.netlify.app/contactus.html) 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](https://github.com/pprathameshmore/QuoteGarden). 

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 Logo](https://imgur.com/a/iLTSCc8)


[Quotivate](https://quotivate.netlify.app/index.html) 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](https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en).

Here is our final presentation and demo:

{% youtube 0PINJsfWYNY %}

##🏢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.

![Quotivate Trello](https://imgur.com/a/A4CW6jY)

##👨🏾‍🎨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;

![Figma Board](https://imgur.com/a/HFdj7lF)

Here is a mockup of the landing page;

![Canva Mockup](https://imgur.com/a/LIO5OOs)

##👿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](https://github.com/pprathameshmore) 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 {% github Shnaeem/Quotivate %} 
- 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._

✌🏾👨🏾‍💻