This is the final project of our team for the HackYourFuture curriculum. We used the MERN stack and the agile methodology under control of our mentors. A quick guide to what we built:
The project 'My diary' is a social networking website developed by Team 2 of class 41. It provides a platform for users to create personal diaries and share their stories with friends and the community. Users can sign up and create profiles, add friends, and search for other users and posts. The website provides offers a variety of features and menu sections:
-
My Diary: Create your own personal diary and share your stories with friends, or create private posts just for yourself. Express yourself, capture your thoughts, and keep your memories in one place. You can even enhance your posts by adding photos to make them even more memorable and engaging.
-
Friends: Connect with friends by adding them to your friends list. Utilize the search functionality to find and connect with other users based on their first name, last name, birthday, country, or email. Expand your social circle and stay connected.
-
Feeds: Stay updated with the latest posts and activities from your friends. Explore a dynamic feed that displays posts, photos, and updates from the people you follow.
-
Search: Discover new users and posts through our comprehensive search functionality. Search for specific users posts or explore popular tags to find posts related to your interests. It's a great way to explore and engage with the community.
-
Settings: Customize your profile! Personalize your experience and manage your account settings with ease.
Additionally, our website is moderated by a dedicated team to ensure a safe and enjoyable environment. Our moderators have the ability to ban any inappropriate content to maintain a positive user experience for all.
Experience the power of social networking and connect with others through our user-friendly interface, designed to provide a smooth and engaging experience. Start sharing your stories, discovering new connections, and exploring a vibrant community on our social networking website.
Experience the full potential of our website with our interactive demo, where you can explore its captivating features using the demo login credentials: username "cool@test.com" and password "12345678".
Click here for the Demo version
First, to setup all the directories run the following in the main directory:
npm install
npm run setup
The first command will install cypress
and some small libraries needed for running the rest of the commands. The second will go into the client
and server
directories and set those up to be ran.
In the client
and server
directory there are two .env.example
files. Create a copy and rename that to .env
. Then follow the instructions in those files to fill in the right values.
To run the app in dev mode you can run the following command in the main directory:
npm run dev
client
├── public
└── src
| └── __tests__
| └── __testUtils__
| └── assets
| └── components
| └── context
| └── hooks
| └── pages
| └── __tests__
| └── util
| index.jsx
cypress
| └── fixtures
| └── integration
| └── plugins
| └── support
server
└── src
└── __tests__
└── __testUtils__
└── controllers
└── db
└── middleware
└── models
└── routes
└── util
index.js
public
|| public facing client code__tests__
|| anyjest
tests for specific components will be in a__tests__
folder on the same level__testUtils__
|| any code that is only being used in the tests is put in the__testUtils__
folder to separate that away from the rest of the codecomponents
|| all of our shared components that are used over multiple pageshooks
|| all of our custom hookspages
|| the page components of our app, any routing will go between these componentspages/components
|| components used specifically on those pagesutil
|| any utility functions that can be used anywhere on the client sideindex.jsx
|| the start point of the client
fixtures
|| any data/files thatcypress
needs can be placed hereintegration
|| all of our tests are in here, separated in folders based on the pages in our appplugins
|| any plugins for ourcypress
configuration can be placed heresupport
|| custom commands and other support files forcypress
can be placed here
__tests__
|| anyjest
tests for the api endpoints as that is our testing strategy for the backend__testUtils__
|| any code that is only being used in the tests is put in the__testUtils__
folder to separate that away from the rest of the codecontrollers
|| all of our controller functions that interact with the databasedb
|| all of our configuration for the databasemodels
|| all of ourmongoose
models will be placed hereroutes
|| code to match up the API with our controllersutil
|| any utility functions that can be used anywhere on the server sideindex.js
|| the start point of the server
The base stack of the app is a MERN stack (Mongoose, Express, React, Node). Next to that we make use of the following extras:
dotenv
|| To load the .env variables into the process environment. See docswebpack
/html-webpack-plugin
|| To bundle our React app and create a static app to host. See docshusky
|| To run our tests and linter before committing. See docseslint
|| To check our code. We have different configurations for frontend and backend. You can check out the configuration in the.eslintrc.(c)js
files in the respectiveclient
andserver
folders. See docsprettier
|| To automatically format our code. See docsconcurrently
|| To run commands in parallel. See docs
For more information on how these work together including the automatic deployment to heroku, have a look at our detailed DEV file.
@testing-library/*
|| We use React Testing Library to write all of our tests. See docsjest
|| To run our tests and coverage. See docsjest-fetch-mock
|| To mock out the backend for our testing purposes. See docsprop-types
|| To type-check our components. See docs
nodemon
|| To automatically restart the server when in development mode. See docsjest
|| To run our tests and coverage. See docssupertest
|| To more easily test our endpoints. See docsmongodb-memory-server
|| To mock out our database in our backend tests. See docscors
|| To open up our API. See docsmongoose
|| To add schemas to our database. See docscloudinary
|| A cloud-based service for managing and delivering images and other media files. See docsexpress-fileupload
|| A middleware for handling file uploads in Express.js. See docsbcrypt
|| A library used for hashing passwords and performing password hashing functions. See docsjsonwebtoken
|| A library for generating and verifying JSON Web Tokens (JWTs) in Node.js. The jsonwebtoken library provides functions to generate tokens, verify their authenticity, and extract the payload information. See docs
To protect certain routes or endpoints that require authentication, we use the jsonwebtoken library along with custom middleware. The middleware verifies the integrity and authenticity of the JWT provided in the Authorization header of the request. If the token is valid, it allows access to the protected resource; otherwise, it returns an appropriate error response.