Today’s blog post will cover the creation of my newest project, for a more details explanation, view the video below. In this post, I will teach you how to make react twitter components and how to install Three.js.
My Capstone Project
With my recent graduation from Flatiron’s Software Engineering program, I am thrilled to present my final project in the program. Space City Sneakers was created to be an alternative for eBay, StockX, and GOAT, used for friends and family of sneaker resellers. The purpose of my Phase 5 application was to build something that was close to my heart, that I would find very easy to be passionate about. Since I would indeed call myself, a sneaker-head, I wanted to build an app that I would actually use.
The Requirements:
We were tasked with these deliverables:
Backend
Your project must use a non-trivial Rails backend. Consult the following list for examples of things to include. You do not need to include all of these things, and the final decision of what must be included will be up to your project managers.
[ ] Auth
[ ] Tests
[ ] Multiple has_many_through relationships
[ ] Seeds from a complex data set
[ ] Custom routes
[ ] Custom controller/model methods
[ ] Basic database query optimizations
[ ] Background jobs for slow actions
[ ] Sockets or email integration
[ ] One significant refactor
[ ] Validation
Frontend
Your product must use a React-based frontend. Consult the following list for examples of things to include. You do not need to include all of these things, and the final decision of what must be included will be up to your project manager (your instructor).
[ ] Auth
[ ] Tests
[ ] Interacting with a complex API
[ ] Redux
[ ] Custom CSS
[ ] One significant refactor
And to be honest, the deliverables were much more in-depth, but due to some confusion, they ended up changing into these listed above. Here is my Phase 5 Project Pitch:
This project was very unique, in that the deliverables that we were given were very far from what we had learned in the previous few weeks in phases. One of the greatest hurdles that we had overcome was implementing redux, being that we had never done this before it was definitely a challenge. What we decide to do wise go over one portion of redux per day prior to implementing it in our project as a team. These projects were solo projects, however, as a cohort, we decided that it would be best if we could learn everything together and then tackle our own difficulties together moving forward. There were many challenges working alone, but I often times found much comfort being able to ask my peers for help when I couldn’t find a question and answer.
Redux was implemented in order to have full CRUD in the project, this was done in the very beginning with the purpose of organizing all of the brand new cards for the shoes that were in the seller's inventory. Other than this, the project started off just like my last did—by creating a backend in Ruby on Rails that would support sneaker models, user models, and everything in between. Here are my reducers:
One of the hardest portions of this project implementation was incorporating users' login, log out, and authentication, and authorization. This allowed for a great difference between users and admins. The admins, drawn with a ternary conditional, were able to view different parts of the page where they could add inventory, subtract inventory, and manage what is displayed on the users profile. Being that this was the purpose of the website I was very glad to see this use of users and admins work out perfectly. You can see in my code below, that I created a ternary statement around the Warehouse link, this created a tab that only specific users with admin permissions could access!
In total, I probably only spent around 10 days working on this project, of the allotted 21, due to working out all of the kinks and getting them approved by my instructor at the time. However, I think that this pure functionality of a seller and the buyer is all that needs to run on the side. I was also able to play around with the Google maps API once again, where I would be able to take the users location and post it onto my site in the Google maps so that the buyers and sellers could know the shipping cost at the time which would be something I would invite in the future. This and the Twitter API were both published with the idea of checking my API deliverable, however, I think that they both fit the project phenomenally.
Installing Twitter React-Components
The site also includes Twitter components, that will always give updates on the latest and greatest news in the sneaker community. The Twitter component is purely a react base component that I had to install by doing this:
npm install --save react-twitter-widgetsAfter this, read these docs.
This is all that was required of me to publishing the Twitter component. It can be organized by height with more features later on and it also has a dark and light mode as well. Very easy to use!
CSS & Styling
Three.js
After this, I was able to experiment with something that I had been wanting to do for a long time, and that is three.js. Now three.js is very cool because it is a 3-D modeling library for JavaScript that essentially gives somebody the ability to render 3-D objects (either created from blender, spline, or any other professional program) to the DOM. This makes it so that I was able to upload a rendered shoe (Jordan 1 Obsidian) from a download on a free site and implement it onto my homepage with an auto-rotate, ambient light, and orbital controls. The purpose for this was because I wanted to challenge myself in implementing a new concept or a new library, because I thought it was cool, and also because I wanted to give the user something to catch their eye when they made it to the side. Now being that this was a site for space city sneakers, I wanted the emphasis of the shoe to resemble a planet floating in space, so because of this, I also went to codepen and tried to find it stars in 3-D rendered fields that would allow me the opportunity to implement them on my site and give the user more of an ambulance. Unfortunately, I couldn’t find a 3-D model of stars, but I was still able to find some pure CSS modeling which I was evidently able to upload into my project and eventually even use on my portfolio.
Installing three.js:
npm install --save three
npm install three @react-three/fiber
npm install @react-three/dreiThree.js is the library for 3D modeling. Three fiber is what is used to render in react. And three drei are premade functions and helpers such as orbit controls:
//example only, these two lines are out of context.import { OrbitControls } from "@react-three/drei"<OrbitControls enableZoom={false} autoRotate={true}/>
For now, I will leave you with this video that offered me help with using three.js and getting started. In the coming weeks, I will publish another blog post that goes into greater detail about how exactly I was able to render that shoe with the useGLTF hook.
Glass Components
I supposed that being more active in tech Twitter has given me the knowledge to understand what is trendy at the moment because I completely got this next portion of the project from this idea. Glass components and ‘IOS-styled’ div’s have been the new rage, so I decided to implement some in my own code. I wanted a transparent div to act as a container for my content, this is so that the users could still see the moving stars behind each shoe card.
Here is my final product:
And here is all I had to do in CSS:
.glass {color: #fbfff7;
background-image: linear-gradient(135deg, #54545441, #171717b1);
border-radius: 20px;
width: 85%;
height: 85%;
padding: 15px;}
That’s all for today, folks. Thank you so much for checking out this week’s blog. Here is a link to the Github repo. Once again, I highly recommend looking at the video listed above for a greater understanding of the project. Until next time! ✌🏾
