Updates!

Wow, the year has gotten away from me! This school year has been much less chaotic compared to last year, but still, teaching a full day and then coming home to code for a few hours really keeps you busy. Not to mention we just had a baby!!

aUEr4kn

 

 

Monroe says hello!

 

So I was looking and because I haven’t posted since August, I have quite a few things to write about. I’m going to split up the posts, so in part 1 (this post) I’ll write about two projects I built using primarily Node and EJS – WikiSpot and FamCHAT. I finished up WikiSpot right before Monroe was born, and then started on my Capstone project, which I’ll describe in part 2. I also have one more app that I built the weekend that Monroe was born, a diaper/feeding tracker. So yea, I’ve been busy! 🙂

Bloccit aka FamCHAT

Bloccit, which I’ve re-dubbed ‘FamCHAT’, is a reddit-style application that allows users to post, comment, and vote on each others posts. It was built using an MVC architecture with Node, Postgres, and EJS as the main components. Some other features include authentication, authorization, create/read/update/delete topics, posts, and comments, voting, and unit/integration testing with Jasmine.

How about we go through each one and I’ll give a short summary of what we looked at? Here’s the order that Bloc laid it out for us on the Bloccit project.

  • MVC
    • MVC definition and separation of concerns
  • Express
    • Role that Express plays in a Node app
    • What is middleware?
    • Start TDD with Jasmine
  • Deploy
    • How to deploy with Heroku
    • Environment variables for development and production
  • Routing/View
    • Used Express router to serve a few different pages
    • Mounted EJS view engine to handle rendering views
    • Initial work with controllers
  • Sequelize and the models (associations, relationships)
    • Purpose of models in MVC
    • Create models
    • Model associations (one-to-one, one-to-many, many-to-many)
    • Model that references objects of another model
    • ORM – Sequelize (postgres)
  • Start CRUD operations
    • How to CRUD with routing and db querying
    • Dynamic routing
  • Seed data
    • Use Faker to seed data and test your site
  • Express validation middleware
    • Purpose of validation
    • Basic validation
    • Tests for validation
  • Authentication with Passport
    • Sign up, sign in, sign out
    • Define session
    • Alternative auth strategies
  • Authorization for user roles
    • Role of authorization
    • Difference between authorization and authentication
    • Implement role-based authentication

Recap

This was a tough project. Going from React to Node was pretty challenging, and sometimes still is when you are trying to answer the overall big picture questions. Especially considering how much React can handle now with a few additional libraries, it felt like a different world when I stepped into Node and began routing and serving data from databases.

However…

I ended up LOVING node. When I finally got the hang of it, the idea of separating concerns and routing in a very targeted kind of way really appealed to me. I liked the idea of saying, “Ok, I want to create a route to show this post in this topic, so I’ll create a route like this:

router.get(‘/topics/:topicId/posts/:id’, postController.show);

and then handle my view logic in the controller and db logic in the posts.queries file. Keeping everything separated really appeals to my OCD nature. There are times when stuff is hard to find sometimes, but usually that’s when I forget to think about the category of whatever it is I’m looking for. If I do that, everything is right where it should be.

Links

Live Site

GitHub

Screenshots


Blocipedia aka WikiSpot

Blocipedia (WikiSpot) is a web application that allows users to create, collaborate and share wikis. This site was similar to FamCHAT in it’s MVC architecture with Node, EJS, and Postgres, but we really kicked it up a notch this time with a few additional db-relationship challenges, like having collaborators on your wikis if you choose to.

Resources:

  • Node.js
  • Express.js
  • Request
  • PostgreSQL
  • Sequelize
  • EJS
  • Bootstrap
  • SendGrid
  • Stripe

This project also utilized SendGrid for email sign-up verification, Stripe for payment integration, Express-validator for validations, Passport.js for authentication, Morgan for route logging, Bcrypt.js for encryption, Jasmine for test-driven development, Faker to help seed the database and Heroku for deployment.


Overall project structure

  • Scaffold and deploy
    • Expected to get everything set up – github, db, npm packages, and then deploy to Heroku
  • User Sign Up, In, and Out
    • Similar to user sign up from before, but now we send confirmation emails with SendGrid
    • Passport auth and express validation
  • Wiki CRUD
    • Create models, associations, views, routes, controllers to handle create, read, update, and delete of wikis.
  • User Roles
    • Again, similar to before, but now with option for user to upgrade to ‘Premium’ so they can create private wikis and add/remove collaborators from their private wikis.
  • Seeding Data
    • Use sequelize to seed data
  • Upgrade an Account
    • Use Stripe to charge users, then upgrade their role to ‘premium’
    • Option to downgrade back to standard account
  • Private Wikis
    • Premium and admin users should be able to create new private wikis and make public wikis private
  • Markdown
    • Add markdown functionality when editing wikis
  • Wiki Collaborators
    • As a premium user, I want to add and remove collaborators for my private wikis
    • Private wikis should only be visible to admins, the wiki creator, or wiki collaborators

Recap

This project was really tough. Like seriously tough. I learned a lot about database querying and have since learned that I STILL have a lot to learn. Database querying is so frustrating sometimes.

I also learned a lot about structuring models correctly and making associations that work well with each other. I also started learning about involving APIs like SendGrid and Stripe, and making sure to have dev keys and production keys separated and available to Heroku. Lastly, I learned that testing can be a pain, but is super helpful later on when you can’t figure out why something isn’t working.

Links

Live Site

GitHub

Screenshots


Next time:

  1. Baby app!
  2. Capstone Project (Texas Math Central 1 and 2) Why are there 2? You’ll find out!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s