Wish List Shop Springboard Capstone One
3 min read
Author: Tracey Trepper Slack: @Tracey T [April 21]
For the first capstone, I knew immediately that I wanted to somehow combine my coding experience with my fashion experience. After brainstorming and researching various API's, I landed on the Googio Search API. With that, I started to formulate the idea of doing a Pinterest style board where a user can create their own list and search for items to add to the list. You can call the list whatever you want and you can have multiple lists you can contribute to. I have called it Wish List Shop and have it both on Github and Heroku. As you will see, I am still working on it to finalize details and stylize it to my liking.
Developing the Capstone
I started by installing Flask, SQLAlchemy, WTForms and Bcyrpt. Then I started building my database schema,
models.py file and mapping out my routes and html files. Since I am such a visual person I decided to map everything out on scratch paper first, drawing arrows between routes with paper and pencil. Picturing myself as the user, I started by building the signup and login routes. Working across
forms.py I started with the user route and included Bcrypt to make sure all passwords would be hashed when viewing the database through Postgres and the terminal. I also added a simple logout route and using WTForms, an update user route. Now the user is able to seamlessly sign up, login, logout, and update their information.
Once the user is signed in, you are brought to
user_details.html where you can create your wish list. Using WTForms, the user can name it what they would like and click "create" to set up their wish list. Once they click the button they are brought to
wishlist_details.html where they can enter an item to search for. This section introduces the API and again using WTForms, the item being searched for is entered in the search box.
The user is now brought to
show_search_results.html where they can view the results from their search, choose which item they want to add to their wish list, write a small description of the item and click Add to Wish List. This also uses WTForms.
The user will now be redirected back to
wishlist_details.html where they see the image added to their wish list. They can search for and add as many items as they would like. They also have the ability to delete a wish list they created if they choose.
Ideally I would like to make the overall website appearance much nicer through CSS and Bootstrap and would love to add additional features, but am proud of how far I came to get to this point and overcome challenges I faced while trying to complete this project.
The big challenge was working within the confines of an external API and making it work the way I needed. I tried to accomplish this by studying the API documentation and brainstorming with my mentor to be as straightforward as possible in my code. I also had issues with the model relationships which resulted in me going back to various sections in my boot camp and researching online.
Another big challenge I faced was being able to filter the wish lists so only the user who created them could view theirs. Originally I was trying to get all wish lists and loop through them like:
wishlist = Wishlist.query.all() wishlist_id = [w.id for w. username.wishlist] + [user.username] return render_template('home.html', wishlist=wishlist)
However I soon came to realize that using filter was the best method:
wishlists = Wishlist.query.filter(Wishlist.username == session["username"]).all()
I found these small challenges made me better understand the basics of python and flask and hope I can continue to improve on this project as I get better!
- Live Demo: wishlist-shop.herokuapp.com
- GitHub Repository: github.com/tbtreppe/wishlist-shop.git