WDI Day Fifty-Two: React Research

Today was more of an open-ended day. We had the option to work on a React JS lab or spend the day researching a technology of our choosing. I decided to do some serious document diving with React. Front-end frameworks are tough, especially for someone who is being exposed to them for the first time. So I did my best not to get frustrated when I wasn’t learning as quickly as I’d like to.

One thing that was pretty helpful was walking through the React Router tutorial. It gave me a better sense of how all the files are tied together in React, however, I still have a lot more practice to do before I feel fully comfortable with the framework.

WDI Day Fifty-One: Computer Science

Today was a bit of a crash-course in computer science. We reviewed a handful of over-arching topics involved with data and sorting, including Big-O notation. Big-O notation is a way of comparing the efficiency of algorithms. We read over a pretty useful blog post on Big-O notation and  did a few exercises involving different types of sorting, such as quicksort.

Resources

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-Nine: Intro to ES6 & React JS

We have a three day weekend coming up, which will be perfect for me to start working on more Angular tutorials and getting more comfortable with some of the concepts that we haven’t had much time to cover in class.

Today we reviewed some of the differences and problems solved with ES6 when compared to ES5. The class broke up into teams that worked on lesson plans for different ES6 topics. My group focused on getters and setters and template literals. Both seemed pretty interesting.

Later we reviewed React JS. From the brief introduction we received, I can tell already that I really like React’s error messages – they’re not as cryptic as Angular’s errors. Yet again, we only glazed over a few things, so this weekend I hope to delve deeper into it.

WDI Day Forty-Eight: Web Sockets and Lab Time

Web sockets are a way that users can interact in real time with each other on websites. During class we did a quick tutorial where we created a chatroom – it was some pretty cool stuff. After walking through the chatroom with socket.io, we tried to add Angular to the mix, and yet again it tripped me up a bit.

In the afternoon the instructors announced the web socket lab, where we will have to build a game with the MEAN stack and use web sockets. I can’t believe how many labs we’ve had – here I thought this weekend I would be able to get a head start on my final project. Looks like I’ll be refactoring the lab that was due this morning and have to complete yet another project.

I still feel pretty shaky with Angular JS, so I’m going to attempt to do several tutorials over the weekend. I did manage to put a basic MEAN stack framework in place for my lab project that I’ll work on customizing more tomorrow. I am also going to attempt to create Tic Tac Toe.

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-Six: Building a MEAN App & Starting a MEAN Lab

We had an introduction to adding Angular to the mix when building apps with Mongo DB, Express JS, and Node JS. However, the intro was a little too brief for everyone’s liking. Essentially we walked through an exercise that incorporated Angular with the rest of the stack, but not many of us were feeling at all confident with this new component.

After attempting to complete the in-class assignment, we were introduced to our lab for the week – building a MEAN stack application. We could either work in groups or alone. Although I enjoy working with others, when I’m struggling to retain new information, I do much better being able to struggle and absorb things on my own a little bit before returning to the group. Thus I opted for working on my own project.

It was a bit of a struggle – I tried to walk through the in-class assignment several times, but was unable to build something that could function. Next I started Googling all sorts of tutorials, desperate to find a working example of a way to format and use all these different pieces together. Luckily, I finally stumbled upon something that worked and helped me add basic CRUD functionality to the app. Once I had the working pieces in place, I pretty much called it a day. I was pretty sleep deprived from the day before, but I did indeed successfully complete a large chunk for the lab.

I’m hoping that tomorrow goes well and that I can successfully refine this application. I have a sturdy foundation now–all I want to do now is add to it and read over a few documents to make sure I’m understanding everything involved with the basics for the MEAN stack.

WDI Day Forty-Five: Mongoose with Express & Intro to the MEAN Stack

After feeling really frustrated with Angular JS, I spent the weekend reviewing a few exercises and found myself beginning to feel a little bit better about Angular. I think the problem was that I was so overwhelmed with my group project, trying to tackle the front-end and back-end on my own, that it was all too easy to get discouraged by every technology we were using.

Today we did more work with Express and Mongoose, and worked on a lab where we created a very basic CRUD app in Express. I’m liking Express better than Angular thus far, but I really do need to immerse myself with both more to really know for sure how I feel. We also received a bit of an overview of the MEAN stack, but only really focused on using Mongo, Express, and Node. I’m looking forward to seeing how we incorporate Angular with this stack.

WDI Day Forty-Four: Express & Mongo Intro

It’s been an exhausting week, but thankfully projects are over and today we had an introduction to Mongo and Express. We reviewed Mongo DB, which is a no SQL database, and used Mongoose to make queries. When it comes to databases, I’m realizing that I really enjoy working with querying for information. For some reason there’s something fun about that.

Express proved to be a little bit confusing. It made me realize that this weekend I need to review Angular JS and also do a little document diving with Express. I want to make sure things make a lot more sense to me in the upcoming weeks.

Resources

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