In this project
I created a Dating application
using a MERN stack
For this project I wanted to use all of my skills that I had learnt over my time at Winchester. I have decided that I would like to persue the role of a React Engineer after I leave the unversity. I therefore concluded that I would to conduct a MERN stack project, that will enable me to make use of industry standard practices such as MongoDB, Express.js, React.js and Node.js. I have also been facinated with the functionality of social media and dating applications so I decided to create a MERN stack dating application.
What I have done
Breif
As this was a personal project, I had a lot of creative freedom with how I wanted the app to look and work. However I wanted to learn how the functionality of a MERN stack application worked, as well as how to use this method of coding for the future. This project will be used to show off my development skills to future employers.
Week 9:
I began with looking into certain UI and UX designs inwhich the most successful dating apps utilise. I identified that the swipe feature as well as private messaging are two essentail features for an application to work. Furthurmore I looked into what colour schemes, as well as logo correspond the best with users.
After conducting research into the most successful dating apps I decided to mirror the ui deisgns of tinder as I felt it was the most aesthetically pleasing, as well as most smooth interface. After finshing the design decisions, I moved onto creating the application.
Despite the project having a relatively easy design to create in terms of UI building, there was a lot of research needed to be conducted in terms of how A MERN stack works. However I looked into how MongoDB commincated with the app via an API and how you could use the service 'Postman' to also aid with linking the front end and backend. I came across Code Camps Mern Stack Video on Youtube the enabled me to learn about how the MERN stack functions and why it is used so much within the development industry.
Week 10: The Start
To start the project, I made use of visual source code. I created a react app named Dating-App-Alex, I also made use of express.js for server side interactions. I imported mongoose which I used to connect to mongodb, making the connect super easy and as painless as possible.
I deicded that I would host the project on FireBase after I had compelted the project, as I have an account with Firebase and I am well aquianted with how it works, however the difference for this project is that I conducted the back end coding by myself, and did not make use of the back end services which Firebase also offers.
To begin with I started the basic coding to create the header which was the front page to provide a smooth expereince for the user. I downloaded the ES7 REACT/Redux extension which enables me to make use of Javascript and React/Redux snippets. I made use of material ui for the icons for the top of the header, using log in icon, logo and chat icon, to act as buttons to navigate the user through the webapp.
I then imported the tinder logo as I had not creatred the one for this project and I was following tinders ui. I made use of CSS to resize and make sure that all icons and logos fit within the contianer.
Week 11: Profile cards and Functionality
After finishing with the navbar and header. I started work on the swipe function for users to decide on what other users they wanted to match with and be linked to talk via the chat function. Again I made use of basic CSS to style the cards to the correct size inside the page.
As I had not created the back end yet I linked the tinder cards to local images with a captioned name for each member, I did this so that I could create the swipe function and test out the buttons. However this would later be the pictures in which users have uploaded after logging in.
Once I had compelted this I created the swipe buttons feature. I also established a css file for this function. I then imported the relevent icons from material UI. Each button was programmed to perform a different function with the tick and the cross icons allowing users to select and match with people without having to swipe, I also included a super like function however I aimed to implement this furthur into the project.
Week 12: MongoDB Backend development
After establishing the front end, I moved onto working on the back end area of the project. I created a mongoDB account and established a mongo project. After creating a new project I selected Amazon as the server provider.
I then went back into the app and created the server files which would establish and api to communicate between the front and back ends of the app. This can be seen in server.js in the github repository.
To enable the server the get started I established applications configuration. I established the port to be 8001. From there I went back to mongodb and established a admin log in and password, which I would then link back into the
I then implemented the API endpoints into the server.js utalising Mongoose to create a link between the front end and mongoDB. As seen in the image below to connect to the cluster, the string of code was pasted into server.js, with the admin username and password needing to be implmented into over where it says username and password. I then created dbCards.js which stores the data for the tinder cards uploaded, with data such as name and imgURLs being stored.
In order to enable all of this I sudo downloaded the package nodemon, which is a tool that helps develop node applications by automatically restarting the node application when the file changes within the directory.
Week 13: API development
In order to develop the API I made use of the software postman which is an industry standard collaborative platform that enables API development, I implimented the link to localhost:8001 linking it to postman. After this I imported the package REST client, which separates clients from servers, by serparting the UI from the data storage, the portability of the UI acros platforms is improved. As well as this scalability via simplification of server components is also improved. Because fo this, the separation enables the components to grow independently.
After this I made changes to the respective Dating card files, as well as user files updating them to the new backend information, moving them from local links and using image URLs from the internet, but istead using user uploaded information.
After establishing this feature the project was pretty much complete with the user information being presented within the MERN stack application.
Functionality/Final Outcome
To the left is a video showing the user experinece within the application. As seen the user is able to swipe right on users of their choice, this is then stored on the database.
Final Development and project summary
To conclude, I feel this project has been extremely beneficial to my understanding of how javascript frameworks merge together and work with each within stacks, especially within MERN. This project has also enabled my skills within research to increase, as planning on how to educate myself in how a MERN stack is created and what each framework contributes towards the project. I have sharpened my skills within CSS and which has resulted in my feeling a lot more confident about implementing intersting style features into my coding.
It has enabled me to educate myself with services and plug ins used in industry for react as well as furthur expanding my passion for javascript development as well as presenting a smooth method of backend development via mongoose and mongDB, and I will look to expand this passion into my internship after leaving university. This project has allowed me to flourish my organisation, time management and communicatative skills, as the weekly teams calls enabling me to stay up to date with the team, as well as allowing me to bring up any quieres I had as well. However I do feel that my organsiation could have been better as I did run out of time to fully flesh out the intended features however I still managed to produce a working MERN stack app.
I will continue to set myself mini projects to work on over the summer so I dont forget or go rusty on my javascript skills. For my next personal project I would like to get some exerpience with Vue.js as I have not had any exerpience with it as developer yet.