Note: to see the source code and read a more detailed story about the project, including how to run and use the app on your computer, potential future additions to the application, and credits to team members who contributed to development of DuckPond, consult the README file in the project's Frontend and Backend repositories on GitHub. The Frontend repository README file explains how to install the frontend part of DuckPond, while Backend repository's README file contains steps for installation of the backend web architecture for DuckPond.
Full-Stack social network application modeled on existing platforms like Twitter and Instagram
DuckPond is an example of a 3-tier MERN (MongoDB, Express, React, Node.js) full-stack architecture
Users can create new accounts on DuckPond, and sign in at any time with valid credentials
Every user has a Profile which they can update at any time with new personal information, such as a profile image, biography, country of residence, etc.
The main page of DuckPond is a Feed page that holds all the active posts from all users who are registered to the social network. Feed page provides all the typical social media features, from liking and commenting on other people's posts, to deleting or editing one's own posts (not those from other users however)
Furthermore, users can make new posts, search for other users on the network, change the app theme, sign out, and also delete their accounts if they so decide
DuckPond is a responsive application, and its interface can be accessed from both a desktop machine and a mobile phone
Code for this project was written in JavaScript, HTML, and CSS languages
The technology stack utilized for this project was MERN (MongoDB, Express, React, and Node.js)
The editor used for the project was Visual Studio Code, version control was done with Git, Figma and Whimsical were used for visual outlines (wireframes) and flowcharts
Bulma was our CSS framework of choice
Both Insomnia and Postman were utilized for API endpoint testing (on the backend). However, we decided to make our own API testing tool that would support automated testing, and we developed it in Python using the pytest framework. The repository of this automated testing tool written in Python can be accessed here
Hackolade was employed for making data models, Entity Relationship (ER) diagrams, and schema designs for collections and documents of our MongoDB database
To connect frontend layer of the application to backend logic, we utilized Axios API for sending HTTP requests to the backend server
Font Awesome toolkit was used for fonts and icons on the application's website (frontend)
An extra step that has also been taken was containerization of the project with Docker, to achieve OS-level virtualization and make it easier for end users to test DuckPond without having to install a lot of environment dependencies, packages, libraries, etc.
Prior to starting this project, I was not very much experienced in backend development and using MERN technology stack, more specifically using Express as server-side framework, Node as a JavaScript runtime environment (server platform), and MongoDB as database. I only had knowledge of React for frontend development. Furthermore, MongoDB is a NoSQL database system, and before this project I only worked in SQL-type databases and database management systems for those (I had experience with MySQL). The tools used for backend development in MERN stack, like MongoDB Compass, API test tools (Insomnia, Postman), and Hackolade were new to me as well. Therefore, I needed several weeks of both research and hands-on practice to familiarize myself with this software stack, but I managed to catch up pretty fast with the rest of the team
The integration of the frontend code to the backend side of the application was by far the most time-consuming and difficult phase of building DuckPond, as it exposed bugs in both parts of the project that were previously not detected nor found to possibly cause issues in the future. This meant going back to backend code and making changes to it (introducing new endpoints or editing existing ones, fixing errors with data retrieved by endpoints, etc.), and sometimes editing and upgrading already finished and tested frontend code when it would be missing certain elements or React components
Axios library used for sending HTTP requests from the frontend to the backend server was initally causing CORS errors and failed to fetch data from the database. This issue required several days of research and debugging followed by several days of trial-and-error attempts to make all endpoint types return desired data from the database
Forgot Password functionality has not yet been implemented due to Mailgun API and Gmail API not producing expected results, since these solutions required both the sender and recipient of email messages to change certain email account security settings. Gmail did not work as desired with Nodemailer module for Node.js. These problems caused our application to, as of the time of writing this description, be missing Forgot Password service for resetting user password
I was assigned this project while participating in the Bay Valley Tech's internship program, and I was looking forward to it because I needed more experience in full-stack application development. I also wanted to add new technologies to my portfolio stack, like MongoDB, Express, Node.js, Bulma, Postman, and others, and this project was a great opportunity for me to learn them
This almost 3 months long project taught me that good methodology, team organization, and effective leadership are crucial components of any software engineering process
I learned that even if one is not very familiar with certain set of technologies, they can still be productive in a team project that requires knowledge of those technologies if they put enough effort in learning them by both reading documentation and other study materials, and being willing to immerse themselves in practical work even if initial attempts are filled with setbacks. The most important thing is to never give up, learn from mistakes, and keep trying without thinking about results
Lastly, I realized that medium to large scale software projects like DuckPond are very time consuming and in order to be completed within a couple of months, they should be performed by teams of developers and engineers. The same goes for any larger full-stack application. Perhaps such projects can be finished by a single person, but that process would take considerably more time than team work would require to deliver the product and finalize all the steps in the process
At the initial stages of development, we used Insomnia and Postman to test API endpoints for all HTTP methods (GET, POST, PUT, and DELETE) that are used for communication with the backend server
Due to problems with automating tests in both Insomnia and Postman, the team decided to make our own automated testing program in Python. This program, when run, activates all the endpoints on the server and sends requests for communication with the database for each of them. If all tests run successfully, it means the backend part of DuckPond is fully operational
The repository of our Python automated test tool can be found here. Browse the README file for more information and screenshots of this subproject
My developer log for this project has been uploaded here
The flowcharts I made in Whimsical for Login and Register endpoints, deleting, updating, and getting data on user's Profile page or Feed page, account deletion, and other API methods can be seen on this link
The wireframe schematics I made in Figma for Login and Register pages is shown here. The wireframe for the Feed and Profile pages and Post modal are uploaded here
