WDI Day Fifty: Completed Lab & React Router and React with Backend

This morning our MEAN Stack and Web socket lab was due. I decided to work on something simple in order to help me get a better understanding of the technologies used, so I worked on a game of tic tac toe. Web sockets are pretty fascinating, and I hope to incorporate them into a few future projects.

tictactoe-screenshot

So far, the game doesn’t do everything that I’d like it to do. I haven’t used the database to persist the game data, so that’s one thing to add to my ‘to do’ list. I’d also like to add the following:

  • Prompting the user for their name
  • When users chat, having their names appear beside any remark made
  • Scoring

The rest of the day we did a code review of a React to do list application. React definitely seems a little easier than Angular to pick up, but I find myself wanting to spend a good chunk of time to building and piecing apart applications in order to get a better understanding of Angular as well as React.

WDI Day Forty-Seven: MEAN Lab

The MEAN stack is pretty difficult to work with – at least it is for someone who is completely new to it. I enjoy working with Mongo DB, Node.js, and Express.js. The problem child in the stack is Angular – I’m realizing I’m not grasping everything that I thought I was.

Today was the last day to work on our MEAN stack lab. I decided to create an app where users can post their projects and have other users critique their projects. Users can upvote/downvote projects as well as critiques.

I was able to successfully complete the following:

  • Have users create new projects, delete existing projects, and view all projects
  • Have users upvote/downvote projects
  • Have users add critiques for different projects
  • Have users view all critiques made on projects
  • Have users upvote/downvote critiques
  • Seed the database with dummy data
  • Use show/hide Angular directives to make a better user experience

At this time, I have yet to do the following:

  • Allow users to update posts
  • Add the ability to delete comments
  • Create RegEx to prevent users from submitting critiques if the critique uses banned words or phrases
  • Polished styling (I was only able to do some preliminary styling)
  • Launch the app to Heroku

Although building this application was a huge struggle, I felt as though the application functioned a lot better than my project 3. It was also quite a learning experience!

Project Details:

MEAN stack application where users can upload projects and have other users upvote/downvote their projects. Users can also comment and upvote/downvote comments.

View the project

Technology Used:

  • MongoDB
  • Express JS
  • Angular JS
  • Node JS
  • Heroku

WDI Day Forty-Three: Project Week 3, Presentations

The group project week is officially over, and I’m relieved. It was definitely a learning experience, and it was a bit tough having to tackle so much on my own. It’s a shame that I’m not that proud of the project itself, since it only incorporated some basic CRUD functionality, but I hope that the work I’ve done on it will inspire me to build something different in the future.

This weekend I plan to work on putting together a couple of stand-alone Angular apps so I can get a better feel of the language. I’m also excited to start brainstorming ideas for my next projects.

sojourn-screenshot

WDI Day Thirty-Eight: Angular Review & Lab Day

Apparently the vast majority of my class is struggling with Angular, so it’s good to know that I’m not alone. It’s been a lot of hours this week spent staring at code, attempting to make things, fiddling around with existing projects, and trying so desperately to get things to click.

This morning started off with a review, and then we had the rest of the day to work on a lab. We had to build an Angular app with a basic CRUD functionality. The app was called “WDI Radio,” and if we were able to get to it, we had to figure out how to play mp3 files in the app. I almost made it that far, but was proud of myself for putting together the app fairly quickly and deploying it with Firebase – something I had never done before.

wdi-radio-screenshot

WDI Day Thirty-Three: Project Week 2, Presentations

After an exhausting week of trying to get things to work, have things break, and also find myself unable to complete a few ‘nice-to-haves,’ I somehow made it through it all with a functional app that looks nice.

Today we worked on finishing touches for our applications. We also did screencasts of our apps to demo them. It was my first time ever making a screencast, and I’ll definitely need to do more of these in the future. Anyway, here’s mine:

I was really excited that this morning I managed to resolve my whole sending an image to the database issue. It was funny how I was almost in disbelief when I got it to work. Apparently I stared at my screen for a while and said, in disbelief, “I got it.” Everyone who was coding in the room cheered and high-fived me. They can definitely relate to how amazing it feels when you resolve an issue that seems impossible.

Later this week I hope to tackle some of my other unsolved problems. But for now, I’ll take a break and rest from this whole coding thing – I want my mind to definitely stay sharp.

mapsketch-screenshot

WDI Day Twenty-Eight: Testing with RSpec, Many to Many Relationships, & CRUD

We briefly got an overview on setting up tests with RSpec. The syntax was a little strange to me, and I’m realizing I really need to dive back into older things we covered just to ensure I’ve got a good grasp of everything. I won’t have a chance to do that this weekend since I have to work like crazy on my second project, but once that’s done with, I’m looking forward to reviewing things we covered earlier. Later we did a few exercises with many to many relationship models. I understand the concept, it’s just the actual use of this is something that will take some time for me struggling on the side with it. Once the lessons were over with, I worked like crazy on my homework assignment. Here’s a screenshot of the welcome view: coffeecheck-screenshot I had a lot of fun putting it together, but I probably spent more time than necessary styling it. And now I’m off to start working on my second project, so hopefully I”ll be off to a good start.

Project Details:

Ruby on Rails app will CRUD functionality where users can add, update, and delete coffee shops and coffee drinks. View the project

Technology Used:

  • Ruby
  • Ruby on Rails
  • psql
  • Heroku

WDI Day Twenty-Six: Rails Lab & Routing and Associations

So much rails, my mind is just swimming in words like controller, model, and method. Today I woke up super early to get a head start on my lab and homework for the week. I managed to knock out a couple of the bonuses for our Game of Thrones web app, although I didn’t bother to cover everything since I wanted to devote some real time and attention to my homework for the week.

Here’s a screenshot of how I styled the lab app:

got-screenshot

I successfully managed to nest routes for the lab, but didn’t have time to tackle many to many associations with my models. I’m hoping to do that with my homework or second project.

In the afternoon we walked through nesting routes and the type of fixes that are necessary when we move routes from being un-nested to nested. Then it was back to a long day and evening of coding. I’m hoping to make some real progress with my coffee shop app.

WDI Day Thirteen: Project Presentations & Object-Oriented Programming

In the morning we presented our projects in a science-fair style, where several of us had our laptops set up on boxes. I realized I was way more excited to talk to people about the logic behind my incomplete Hangman project than I was about the logic behind my Flash Cards. It just goes to show that it’s better to work on something that you can get excited about because you’ll work even more at getting it right.

After projects, it was a day focussed on object-oriented programming with constructor functions and prototypes. I’m realizing I’m understanding the concepts a lot better now, but certain concepts are still a bit of a struggle, like when to use return statements.

Nevertheless, I’m excited to see how things pan out with this program. Next week we start working with the back-end, so that shall be interesting.

hangman

Resources

WDI Day Four: Portfolio Website Lab

Today was our first lab day. We started off with a lesson in Git, and then off we went to work on building a site for our portfolio. I’ll admit, I’m at a bit of an advantage when it comes to working with layout. Since I’ve had extensive experience in web design, I happily tackle styling whenever it comes up. I managed to style the basics for my overall portfolio site during the day, and started thinking about how I’d like to rollout JavaScript as a later functionality.

Things to add later:

  • Tabbed browsing for portfolio sections (web, application, and illustration)
  • Sorting filters
  • Transitions for the anchor links
  • Additional scrolling animations
  • Making the site mobile-friendly

Overall, I felt like I accomplished a fair amount, however I’m more excited about starting JavaScript tomorrow since today was yet another review day for me.