DEV Community: TheTruth4418

React + Bootstrap = Easy Portfolio?

TheTruth4418 — Tue, 28 Sep 2021 02:44:02 +0000

Every developer of any type all have one thing in common aside from being a programmer, having to make a portfolio! Portfolio's not only showcase your projects, but the website itself is great for showcasing the skill within the developer as well! With me being a React Developer mainly, I decided to build my portfolio with React + Bootstrap!

Why React?
The React framework is really good for the job I believe because of its ability to split each component and tackle it separately. Allowing the splits not only makes it easier to keep your code organized per component, but it will also make the JavaScript(if applicable) easier as well since its separated off into components!

function App() {
return (
   <div>
      <Navbar/>
      <Home/>
      <About/>
      <Projects/>
      <Skills/>
      <Contact/>
   </div>
)
}

This is all the code you will need in the App component! Pretty simple! And for each component, just have those be a function component as well and insert your data!

After all of that is inserted you'll have the skeleton for your portfolio up in no time!

Why Bootstrap?
Styling pages can be really tricky with raw CSS so with my portfolio, I am styling with bootstrap! Using Codecademy's course, I learned bootstrap and started styling my pages in hours! Look at bootstrap as a predefined CSS sheet with classes already defined! This also makes your page responsive which is a highly desirable skill within development!

In Conclusion
I like how simple the process of using these resources to code an entire portfolio from scratch! I would highly recommend this for anyone who knows react, your learning and building something great at the same time!

Deploying to Netlify!(React)

TheTruth4418 — Tue, 14 Sep 2021 02:57:40 +0000

You just spent hard time developing an application and are extremely proud of your work, now time to... just look at it and show your household? NO! Time to push that awesome work of art out for the whole wide world to see! Im going to take you step by step while keeping it as simple as possible on deploying your application to Netlify.

-Project
Make sure your frontend is in its own repo! Netlify wont be able to read the program that has the full-stack in one repo.

Starting on Netlify! First and foremost, create your account on Netlify, connect it to your github as this is how your site will be read!

-Site creation
Choose the option that reads "New site from Git". After this, choose GitHub as the provider, then choose your desired repository. Set up your branch.

In Build command type in "CI= npm run build", in publish directory type in "build".

After you hit deploy site! Well done you have deployed your work of art! Happy coding!

Reduce, Reuse, and Recycle? Components!

TheTruth4418 — Sat, 04 Sep 2021 20:16:04 +0000

This week I realized that one of the major keys of keeping a healthy environment is also one key to effective programming as well! Reusable components that are either made in a previous project or from just scratch will help your next project out a ton! Few examples will include but not limited to:

-Signup Component

-Login Component

Coding out this signup and login skeleton to be able to reuse made developing my e-commerce and fgc application 10x easier! Not having to worry about setting up the bare minimum event listeners and such made adding on what I needed a lot easier as controlled forms can be tricky!

-NavBar

The NavBar Skeleton is also very efficient as well! Can copy paste the line commented and add on as much needed to fit the needs of a traditional or complex NavBars!

Reusable components can go very long ways beyond just basic authentication and navigation bars! To be able to drop a component in from my computer definitely reduces the time needed to set a certain function up!

Thank you for giving my post a read! Follow me for more weekly content!

William West
Rails/React/JS Software Engineer

Final project..

TheTruth4418 — Tue, 27 Jul 2021 19:15:27 +0000

My journey through Flatiron school is almost complete as I wrap up my React project. With the struggles endured during this project I feel it has made me a better developer and I am ready for what's next.

-Synopsis

My Project is for fighting game players to have notes on command so that they can remember what they need at any given time! As of right now I am supporting Mortal Kombat 11, Tekken 7, and Guilty Gear Strive!

-PROJECT FLOW

Starting off with a very generic home screen, can select between Creating/Viewing notes!

-Create

Creating a note will pull up a form depending on whether we view a character or a matchup note with the use of state. The data submitted by the form is then submitted via Redux-thunk.

-View

Upon selecting Viewing mode, users are asked to select the type and then the game separately in order to make the code easier to read.

-CharacterNoteSelect/MatchupNoteSelect

These components pull up a form that will dynamically retrieve the list of characters the selected game. Code snippets shown are for Character but are relatively the same for Matchup as well just little more code due to having to include another character!

Upon mounting the component, I have redux actions to refresh the current note in redux, I then use a function to set up the form based off the game!

-NoteCard/MatchupNoteCard

These are my functional presentation components that display all the info to the client!

Using a little bit of destructuring, I displayed some information, but I needed the use of another component NoteList to take in each note of the character and put it in an array so that I can easily just display that array in my div!

Beyond this I also added functionality to add bullet points to a note as well!

-Conclusion

I plan on developing this application more and more and add exciting things like updates and user functionality!

Creating this application helped me understand React to a deeper level than when I was reading material over it. With the struggles endured on this project, I am ready to face the challenges of the full-stack software development workforce.

Thank you Flatiron School for all your help.

JS Project

TheTruth4418 — Thu, 03 Jun 2021 00:13:05 +0000

After working with JS during this unit, I can easily say that the more I dive into the course, the more I feel the creativity flow through my veins! Each and each project I feel like I learn so much more to do with Full stack development!

My JavaScript app was made for people who play fighting games. Its hard to memorize all of those pesky move inputs and not to mention the matchup information too, so I created an API notebook for people to keep track of their notes for a character or a specific matchup so that during a tournament or even during any point playing, you can easily jot down and read notes on your specified characters gameplay! At the moment I only have Mortal Kombat 11 characters on file but I do plan to expand! Thank you for taking the time to read my post! To React!

Flatiron Rails module

TheTruth4418 — Mon, 03 May 2021 18:24:38 +0000

Last week I wrapped up what I will consider the toughest programming challenge yet in all of my time. Learning the material wasnt that bad, but the project was pretty difficult. I ended up building and scrapping applications over and over again, it felt nice to finally build and finish out this project build.
In the middle of the module on project week the Texas winter storm also affected the project build and ultimately leading me to get a transfer due to deadlines, it was pretty unfortunate but it happens, I fit in with my new cohort and picked the material back up just fine.

Being a former member of the First Robotics Competition back in high school is what infuenced my application. Users log in and can track team activity pretty much anywhere! I am really excited to have done this and I also want my final project to me over FRC as well. On to JavaScript!

-William West