I've joined the #100DaysOfCode Challenge

100 Days Of Code - Log

Day 0: September 8, 2020

Today's Progress: Learned error handling with try and catch, deepened regular expression understanding .

Thoughts: Error handling was pretty new to me before today, I can see some interesting use cases for it. I've used regular expressions for a while now but today's work has definitely deepened my understanding of metacharacter symbols, shorthand character classes, brackets, braces, parentheses and assertions.

Link to work: Form Validation - Practicing Regular Expressions

Day 1: September 9, 2020

Today's Progress: Practiced object oriented programming through making a simple quiz app.

Thoughts: OOP is such an elegant way of structuring programs. I am willing to implement more OOP in the next future.

Link to work: Quiz - Practicing Obect Oriented Programming

Day 2: September 11, 2020

Today's Progress: Today I learned about iterators and generators in Javascript and I built a simple dating app using these concepts.

Thoughts: I had never come across iterators and generators before, I can definitely see a lot of use cases for them.

Link to work: Dating App - Practicing Iterators and Generators

Day 3: September 12, 2020

Today's Progress: Today I didn't learn anything new but I instead worked on a really fun challenge from frontendmentor.io.

Thoughts: I find building projects from scratch really rewarding!

Link to work: Frontend Mentor - Rock, Paper, Scissors

Day 4: September 13, 2020

Today's Progress: I completed a small project using async/ await and scroll event listener.

Thoughts: It's cool to be able to build a page that loads content infinitely.

Link to work: Infinite Comments

Day 5: September 14, 2020

Today's Progress: Today I completed one of the most advanced project I have ever worked on, an IP address tracker. I fetched the IP address locations from 'IP Geolocation API by IPify' and generated the map using 'LeafletJS'.

Thoughts: I got a bit frustrated because the app could be definetely more mobile friendly and also my CSS is pretty messy. But my main focus at the moment is improving JS, so that's fine for now!

Link to work: IP Address Tracker

Day 6: September 15, 2020

Today's Progress: I built this quote generator app HTML, CSS, and Vanilla Javascript. It was quite an easy project but I find re-iterating a fundamental step to really fully understand concepts.

Thoughts: Repetition is key.

Link to work: Quote Generator

Day 7: September 16, 2020

Today's Progress: Spent a few hours deepening my understanding of ES6 destructuring.

Thoughts: I am getting ready to learn React. Before moving onto that, I decided to spend a few days reviewing: destructuring, classes, high order array methods, fetch API & Promises.

Link to work: Practicing-ES6-Destructuring

Day 8: September 17, 2020

Today's Progress: Spent a few hours deepening my understanding of ES5 Constructor functions & prototypes inheritance, ES6 Classes & Sub Classes.

Thoughts: I have reviewed these topics a lot lately and therefore they're getting more familiar.

Link to work: Reviewing-ES6-ConstructorFunctions&Classes

Day 9: September 18, 2020

Today's Progress: Reviewed High Order Array Methods.

Thoughts: I feel extremely confident using and manipulating arrays. Todays refresher was helpful though.

Link to work: Reviewing-High-Order-Array-Methods

Day 10: September 20, 2020

Today's Progress: Reviewed Asynchronous Javascript. Created Weather APP.

Thoughts: Last day reviewing concepts before moving onto React.

Link to work: Weather-APP

Day 11: September 21, 2020

Today's Progress: Created a small Vanilla JS project using Drag & Drop API. Started reading React docs, created first React App and learned about file structure and environment setup.

Thoughts: After 6 months of learning pure Javascript concept, finally time to learn something new!

Link to work: Drag&DropAPI

Day 12: September 22, 2020

Today's Progress: I finally started creating my first React App and learned about JSX, components, props and states.

Thoughts: A little challenging because I still need to familiarize myself with these new concepts.

Link to work: My-First-React-App

Day 13: September 23, 2020

Today's Progress: Today it's been mostly about theory: I've reviewed Javascript concepts through this very useful article: and then deepened my understanding of React's basic concept through React's docs

Thoughts:

Link to work: React-Tutorial

Day 14: September 24, 2020

Today's Progress: Today I've learned about state and lifecycle, learned about 'setState' and created a Clock app with React.

Thoughts: I'm getting to know and to love React much better. I've found this article very useful!

Link to work: Demo - Code

Day 15: September 25, 2020

Today's Progress: Today I've learned about handling events and binding functions in React.

Thoughts: I've found this article very useful!

Link to work: Demo - Code

Day 16: September 26, 2020

Today's Progress: Today I've learned about conditional rendering in React.

Thoughts: I've found this article very useful!

Link to work: Demo - Code

Day 17: September 27, 2020

Today's Progress: Today I've learned about Lists and Keys in React.

Thoughts: Inspired by: The docs, this article and this video

Link to work: Demo - Code

Day 18: September 28, 2020

Today's Progress: Today I've learned about Forms in React and reviewed all the React concepts learned until now.

Thoughts: Inspired by: The docs and this video

Link to work: Demo - Code

Day 19: September 30, 2020

Today's Progress: Today I've learned about 'methods as props' and 'lift state up' in React.

Thoughts: Inspired by: The docs and this video

Link to work: Demo - Code

Day 20: October 1, 2020

Today's Progress: Today I've learned about Composition in React.

Thoughts: Inspired by: The docs

Link to work: Demo - Code

Day 21: October 2, 2020

Today's Progress: Analyzed Component Lifecycle Methods and their behavior in detail.

Thoughts: Inspired by: The docs and this video

Link to work: Code

Day 22: October 3, 2020

Today's Progress: Created a mock of the UI Components and its hierarchy, then worked on the code (static) for 'Products Filter'.

Thoughts: Inspired by: The docs

Link to work: Demo - Code

Day 23: October 4, 2020

Today's Progress: Continued working on 'Products Filter': added states and inverse data flow.

Thoughts: Inspired by: The docs

Link to work: Code

Day 24: October 5, 2020

Today's Progress: Started working on a more complex exercise project: Movie Database.

Thoughts: Inspired by: This video

Link to work: Code

Day 25: October 7, 2020

Today's Progress: Learned about Fragments, Pure Components and the useState Hook in React.

Thoughts: Inspired by: This video and the docs

Link to work: Code

Day 26: October 8, 2020

Today's Progress: Learned about the useEffect Hook in React: conditionally run effects, run effects only once, useEffect with cleanup.

Thoughts: Inspired by: This video and the docs

Link to work: Code - Demo

Day 27: October 9, 2020

Today's Progress: Created a todo app in React.

Thoughts: Inspired by: This video

Link to work: Demo - Code

Day 28: October 10, 2020

Today's Progress: Today I've deepened my understanding of useEffect in React and I've learned how to fetch data with it.

Thoughts: Inspired by: This video

Link to work: Demo - Code

Day 29: October 11, 2020

Today's Progress: Today I've learned about Context and the useContext hook in React.

Thoughts: Inspired by: The docs

Link to work: Code

Day 30: October 12, 2020

Today's Progress: Created a Recipe App with React.

Thoughts: Programming in React starts becoming pretty natural and I can finally start developing interesting stuff with it.

Link to work: Demo - Code

Day 31: October 13, 2020

Today's Progress: Built the first part of 'Github Finder'.

Thoughts: Gone over new concepts such as: propTypes and enviroment variables and old concepts such as components (functional and class based) , states and props.

Link to work: Code

Day 32: October 14, 2020

Today's Progress: Implemented search button, clear button and alert in 'Github Finder'.

Thoughts: Gone over new concepts such as: routing in React and old concepts such as destructuring and passing props up.

Link to work: Code

Day 33: October 16, 2020

Today's Progress: Learned more in details about React Routing.

Thoughts: Practiced through building a simple app that uses Routes and Links to render different components.

Link to work: Code

Day 34: October 17, 2020

Today's Progress: Implemented new functionalities to Github Finder.

Thoughts: Finished the first version of the app.

Link to work: Demo - Code

Day 35: October 18, 2020

Today's Progress: Refactored Github Finder into functional components and hooks and learned about the useReducer hook.

Thoughts: Exciting improvements in handling different syntax for React components.

Link to work: Code

Day 36: October 19, 2020

Today's Progress: Dived deeply into the useReducer and useContext hooks: used them for both local and global state management and data fetching.

Thoughts: I find these new concepts altogether pretty overwhelming for now. I'm gonna spend some more time on it to fully understand them before moving onto my next steps.

Link to work: Demo - Code

Day 37: October 20, 2020

Today's Progress: Used useContext in order to build this simple addMovie app.

Thoughts: Even though useContext is considered one of the simplest hooks to use, I'm for some reason, struggling to remember and put into use its syntax. That's why I spent some more hours practicing it.

Link to work: Demo - Code

Day 38: October 21, 2020

Today's Progress: Practiced the useReducer hook.

Thoughts: useReducer is definitely one of the hardest hooks to use but definitely a hook you've got to know if you want to develop larger and more interesting apps. That's why I'm reiterating these concepts over and over again.

Link to work: Demo - Code

Day 39: October 23, 2020

Today's Progress: Implemented context and useReducer in Github Finder.

Thoughts: Learned about different ways of implementing context into apps.

Link to work: Code

Day 40: October 24, 2020

Today's Progress: Refactored Github Finder to useContext and useReducer.

Thoughts: Now App.js is not as crowded, the entire app is much more scalable and I've got a much clearner file structure.

Link to work: Code

Day 41: October 25, 2020

Today's Progress: Prepared and deployed the app to Netlify.

Thoughts: Went through the process of creating this app step by step once again. I plan now to create one React App each day for the next six days.

Link to work: Demo

Day 42: October 26, 2020

Today's Progress: Recreated Breaking Bad Cast

Thoughts: First of the six React projects I'll be building.

Link to work: Code - Demo

Day 43: October 27, 2020

Today's Progress: Started working on the Weather App challenge from DevChallenges.io

Thoughts: Second of the six React projects I'll be building.

Link to work: Code

Day 44: October 28, 2020

Today's Progress: Continued working on the Weather App. I've been trying to implement context and useReducer to the app to make it more scalable.

Thoughts: I've been stuck the entire day, trying to figure out how to refactor the whole app without succeeding. Even though a little frustrating at times because I did not get any tangible results, it's been a great learning day!

Link to work: Code

Day 45: October 28, 2020

Today's Progress: Worked on the WeatherApp. Finally managed to properly implement context and useReducer.

Thoughts: I've been stuck and lost for quite some time on updating the coordinates and fetching the current day's data from the api especially because useReducer is not as familiar for me as useState. I've been learning loads until now from this project and I'm enjoying working on it very much.

Link to work: Code

Day 46: October 29, 2020

Today's Progress: Worked on the WeatherApp. Managed to display correctly all fetched data and to implement new modes to the app through reducer and context

Thoughts: This is fun! It feels like the first learning phase is over and now it's time for action!

Link to work: Code

Day 47: November 2, 2020

Today's Progress: Worked on the Weather App. Managed to solve major issues, implemented search and temperature unit converter. Now working on fetching data asynchronously based on geolocalization.

Thoughts: I've been struggling a lot but also learned a lot through this project.

Link to work: Code

Day 48: November 3, 2020

Today's Progress: Finished the Weather App. Implemented geolocalization, responsiveness, cleaned up the code, organized the file structure, deployed to Netlify.

Thoughts: I found the API used for this project very hard to work with but the whole project has definitely taught me a lot.

Link to work: Demo - Code

Day 49: November 4, 2020

Today's Progress: Started working on the Country Quiz App from Dev Challenges

Thoughts: Halfway through the project, I'm pretty satisfied with the outcomes so far. Still struggling with combining async functionalities to useEffect. Improved scalability and structure of the project compared to the previous ones.

Link to work: Code

Day 50: November 5, 2020

Today's Progress: Finished Country Quiz App from Dev Challenges. Libraries used: React JS and underscore JS

Thoughts: Interesting project. A little easier than the previous one but it has caused me some serious headaches. Mixed up some Vanilla JS Dom manipulation with React concepts, not sure if that's good practice but hey the app runs smoothly!

Link to work: Demo - Code

Day 51: November 7, 2020

Today's Progress: Started Github Jobs challenge from Dev Challenges.

Thoughts: Finished creating the UI with the styling and created the entire file structure.

Link to work: Code

Day 52: November 8, 2020

Today's Progress: Continued working on Github Jobs challenge from Dev Challenges.

Thoughts: Implemented the 'Filter by location, by keyword and bt type of contract' functionalities.

Link to work: Code

Day 53: November 9, 2020

Today's Progress: (Almost) Completed Github Jobs challenge from Dev Challenges.

Thoughts: Implemented 'Default location functionality' and added Details page and description.

Link to work: Demo - Code

Day 54: November 10, 2020

Today's Progress: (Final) Completed Github Jobs challenge from Dev Challenges.

Thoughts: Last adjustments: Improved default location functionality and responsiveness, added pagination and application form details.

Link to work: Demo - Code

Day 55: November 11, 2020

Today's Progress: Started working on a Covid19 Tracker.

Thoughts: Technologies used: React, Moment JS, ChartJs. API: COVID-19 (1.0.2)

Link to work: Code

Day 56: November 12, 2020

Today's Progress: Covid19 Tracker completed!

Thoughts: It was thought and created entirely by myself.

Link to work: - Code

Day 57: November 13, 2020

Today's Progress: Read TailwindCSS documentation. Played around with building some simple UI components.

Thoughts: Such a powerful tool! I'm gonna be using it in the next few project.

Link to work: Code

Day 58: November 14, 2020

Today's Progress: Completed '404 not found' from Dev Challenges.

Thoughts: Easy project aimed to deepen my understanding of TailwindCSS.

Link to work: Demo - Code

Day 59: November 16, 2020

Today's Progress: Started 'url shortening' challenge by FrontendMentor

Thoughts: Setted up TailwindCSS in React and managed to use CSS variables with Tailwind. Build the folder structure and (almost) completed the fully responsive UI.

Link to work: Code

Day 60: November 17, 2020

Today's Progress: Kept on working on 'url shortening' challenge by FrontendMentor

Thoughts: Refined the UI, implemented React hooks and started working on the general app logic.

Link to work: Code

Day 61: November 18, 2020

Today's Progress: Worked on the logic for 'url shortening' challenge by FrontendMentor

Thoughts: Just a few adjustments before the completion of the project!

Link to work:

Day 62: November 19, 2020

Today's Progress: Completed 'Shortly' challenge by FrontendMentor

Thoughts: Built with: React JS & Tailwind CSS

Link to work: Demo - Code

Day 63: November 21, 2020

Today's Progress: Completed 'Profile Card Component' challenge by FrontendMentor

Thoughts: Built with Tailwind CSS.

Link to work: Demo - Code

Day 64: November 22, 2020

Today's Progress: Completed 'My team page' challenge by DevChallenges

Thoughts: Built with Sass.

Link to work: Demo - Code

Day 65: November 23, 2020

Today's Progress: Today I started by learning the basic Terminal commands and Node.js.

Thoughts: After nearly 8 months of focusing purely on front-end development I'm excited to announce that it's now time to start exploring the back-end!

Link to work: Code

Day 66: November 24, 2020

Today's Progress: Explored Modules and the NPM universe, and learned how to create servers with Express.

Thoughts:

Link to work: Code

Day 67: November 25, 2020

Today's Progress: Learned a ton of new concepts: creating a basic Express server, middleWare, handling different request types, routes and templates.

Thoughts:

Link to work: Code

Day 68: November 26, 2020

Today's Progress: Learned how to implement Bootstrap in Express, how to use EJS Partials and how to parse request body.

Thoughts:

Link to work: Code

Day 69: November 27, 2020

Today's Progress: Learned how to define RESTful routes and to create a basic CRUD application.

Thoughts:

Link to work: Code

Day 70 : November 30, 2020

Today's Progress: Went through Express docs once again.

Thoughts: I've learned a lot of new concepts lately and today I decided to slow down and go over them once again before moving ahead.

Link to work:

Day 71 : December 1, 2020

Today's Progress: Created another CRUD application that includes: RESTful routes, EJS, uuid, partials and Tailwind CSS.

Thoughts: These concepts were not as intuitive at first to me, that's why I'm repeating similar tasks over time to gain full control.

Link to work: Code

Day 72 : December 2, 2020

Today's Progress: Learned about databases, installed Mongo, learned about BSON and MongoDB CRUD Operations.

Thoughts: I've created a Gist with my notes on the topic.

Link to work: Notes

Day 73 : December 3, 2020

Today's Progress: Learned about: ORM/ODM's, how to connect Mongoose to Mongo, how to define a Model, Moongoose CRUD, Schema Constraints, Model Instance and Static Methods, Mongoose Middleware and Moongoose Virtuals.

Thoughts: I've also reviewed MongoDB.

Link to work: Code

Day 74 : December 4, 2020

Today's Progress: Created a fully functioning RESTful API using Node JS, Express, MongoDB and Mongoose.

Thoughts: What a fun exercise project!

Link to work: Code - Notes

Day 75 : December 5, 2020

Today's Progress: Built a Node.js API Authentication.

Thoughts: Packages used: @hapi/joi for validation, bcryptjs for hashing passwords, and jsonwebtoken.

Link to work: Code

Day 76 : December 6, 2020

Today's Progress: Created a basic CRUD app using Node JS, Express, MongoDB and Mongoose.

Thoughts:

Link to work: Code

Day 77 : December 8, 2020

Today's Progress: Started working on my first full stack code along project: YelpCamp (from Colt Steele's Web Developer Bootcamp).

Thoughts: I'm excited to finally be building a full stack application!

Link to work: Code

Day 78 : December 9, 2020

Today's Progress: Learned in detail about express middlewares. Continued working on YelpCamp: added EJS-mate, partials and Bootstrap v5 styles.

Thoughts:

Link to work: Code

Day 79 : December 10, 2020

Today's Progress: Learned in detail about error handling in Express apps: Express built-in error handlers, defining custom error handlers and handling async errors.

Thoughts:

Link to work: Code

Day 80 : December 11, 2020

Today's Progress: Reviewed error handling in Express, learned about server-side error handling and Implemented error handling and Joi schema validation into YelpCamp.

Thoughts:

Link to work: Code

Day 81 : December 14, 2020

Today's Progress: Learned about Mongo Relationships: One to few, one to many, mongoose populate, one to Bajillions and Mongo Schema Design.

Thoughts:

Link to work: Code

Day 82 : December 15, 2020

Today's Progress: Reviewed Express, MongoDB and Mongoose topics. Learned about Mongo data relationship with Express.

Thoughts:

Link to work: Code

Day 83 : December 16, 2020

Today's Progress: Created another little CRUD application in order to recap all topics learned in the last weeks: especially Routes, EJS, middlewares, client-side error handling, and MongoDB relationships.

Thoughts:

Link to work: Code

Day 84 : December 17, 2020

Today's Progress: Created the review model for YelpCamp, added validation, styling, and defined MongoDB relationships.

Thoughts:

Link to work: Code

Day 85 : December 18, 2020

Today's Progress: Learned how to better structure routes with Express Router. Explored the Cookies world: how to send, sign and unsign, and how to use Cookie-Parser.

Thoughts:

Link to work: Code

Day 86 : December 21, 2020

Today's Progress: Learned about Express Session and Flash. Restructured YelpCamp to use express Router, served static assets, configured session, and implemented Flash messages.

Thoughts:

Link to work: Code

Day 87 : December 22, 2020

Today's Progress: Learned about authentication, authorization, hashing functions, password salts, and Bcrypt. Created a simple app that uses all of the above.

Thoughts:

Link to work: Code

Day 88 : December 23, 2020

Today's Progress: Learned about PassportJS. Implemented register, login, and logout functionalities in YelpCamp.

Thoughts:

Link to work: Code

Day 89 : December 24, 2020

Today's Progress: Added basic authorization to Yelp-Camp, restructured middleware file.

Thoughts:

Link to work: Code

Day 90 : December 28, 2020

Today's Progress: Continued working on YelpCamp: Added reviews auth. Refactored to controller & routes. Changed ratings to display stars. Set up .env file

Thoughts:

Link to work: Code

Day 91 : December 29, 2020

Today's Progress: Continued working on YelpCamp: Implemented image upload with Cloudinary, Fixed seeds, Added carousel, Customized file input

Thoughts:

Link to work: Code

Day 92 : December 30, 2020

Today's Progress: Added maps to YelpCamp: Geocoded locations. Learned how to work with GeoJSON. Centered map on the exact location. Added custom map popup

Thoughts:

Link to work: Code

Day 93 : December 31, 2020

Today's Progress: Continued working on YelpCamp: Learned about Mapbox Cluster Map. Reseeded database. Tweaked clustering code. Added custom popups

Thoughts:

Link to work: Code

Day 94 : January 1, 2020

Today's Progress: Continued working on YelpCamp: Added styles. Learned about common security issues: Mongo injection, XSS, Sanitizing, helmet

Thoughts: YelpCamp is ready for deployment!

Link to work: Code

Day 95 : January 3, 2020

Today's Progress: Reviewed YelpCamp.

Thoughts: After months of hard work, I finally completed my first (on-demand) Web Development Bootcamp!This has been my very introduction to web dev. I'm now ready to step into a more intermediate stage of my career.

Link to work:

Day 96 : January 5, 2020

Today's Progress: Started working on a new MERN project: DevConnector

Thoughts:

Link to work: Code

Day 97 : January 6, 2020

Today's Progress: Continued working on DevConnector: Reviewed Auth. Created User & Profile routes

Thoughts:

Link to work: Code

Day 98 : January 7, 2020

Today's Progress: Continued working on DevConnector: Created the post model. Added post, get & delete routes. Added post like & unlike functionalities

Thoughts:

Link to work: Code

Day 99 : January 8, 2020

Today's Progress: DevConnector: Finished with the post routes. Completed and reviewed the back-end. Started working on the front-end: React setup. React router. Implemented Redux

Thoughts:

Link to work: Code

Day 100 : January 9, 2020

Today's Progress: Reiterated over stuff learned yesterday. Learned more in-depth about #React Redux. Re-created DevConnector's auth functionalities from scratch

Thoughts:

Link to work: