How I learned the MERN stack in 24 days
Our project is a social media web application. Users can follow/unfollow people, create posts, add comments, and so on. On top of that, there is a Job Search feature in the app so that users can easily search for available jobs by just a click of a button.
Team
Our team members are Ariana Bibiano, Erika Caoili, and myself. As for the ideation of this app, we wanted to focus on 2 things: create a network of likely minded people pursuing software engineering and find a job that is related to the Tech Industry.
Story and Inspiration
Everyone on our team at the time was studying software engineering, and we always wanted to go out on meetup events and network. We always keep in mind that the best and easiest way to find a job in Tech is to network.
A typical software engineering student’s question I always hear is: How can I connect with people who are also the same level as mine? I’m still studying software engineering and, want to find a job soon. How could I maximize finding new people that are in tech?
We thought of making a social media website and add a job search feature for it, and use the questions as basis for creating our project and possibly use a new type of programming stack.
We decided to use the MERN stack (MongoDB, Express, React, Node). The main benefit we decided to use this stack for development is: When developing the backend and frontend of our web application, we don’t want to use different programming languages. It's hard for us to switch between one programming language to another (ie. JavaScript and Python).
The MERN stack is:
- MongoDB: A document-based open source database.
- Express: A web application framework for Node.js.
- React: A JavaScript front-end library for building user interfaces.
- Node.js: A JavaScript run-time environment that executes JavaScript code outside of a browser (such as a server).
- And Mongoose: A simple, schema-based solution to model application data
Timeline
Throughout the development, the first 2 phases started out slowly. Learning a new stack (MERN) is something we didn’t even know at that time. So we went on and research this new stack that will be used for developing the web application.
Phase 1 and 2. We decided to read the documentation and watch introductory videos to get how the stack works. On Phase 3, that’s when the team focused heavily on development. We collaborated using Slack, Google Hangouts, and Trello so that we could keep track of what we’re working at. The last 2 phases were wrapping up the development and deploying it on a cloud server so that we could present it to our peers.
My Role as a Full Stack Software Engineer
I wanted to learn and get used to working in a team environment. And also, I want to specialize in building responsive and elegant web applications that scale to millions of users in dozens of languages.
I mainly focused on developing our custom RESTful API using MongoDB, Express, and Node.js. I did also contribute to adding the Post feature of the web application on the frontend using React and helped deployed the web application on a server using Digital Ocean’s droplet.
Challenges
- Reading the documentations of ExpressJS and MongoDB
- Learning React is awesome! You could use components within other components. However, it takes time to get used to JSX.
- Getting confused about navigating our project directories. It’s great modularizing code, however, It takes time for me to be familiarized with its structure.
- Keeping track of how the frontend and backend communicates is stressful but keeping.
Throughout the challenges, I came to learn new things, but as I learned to communicate well and keep my focus with my peers
What I Learned
Throughout this project, I have not just learned a new skill in developing web applications, but learning this new stack together with my peers. Without Erika and Ariana, I could not have pushed forward and learned MERN. We still got a lot to study and I’m excited about what projects we’ll be doing next.
Conclusion
If you want to take a look at our project that we made, you can go to this link or visit landing.kanvasdevs.com . Thank you so much for reading this blog until the end. I hope this will give you the drive to pursue web development!
About Me
Hello, I’m Kevin! I create nifty things to automation in this world of 10,000 things.
If you want to learn more about me visit me at:
