About📓
Daily-Peak is a web platform designed to display daily peak data, trends and analytics. The project allows users to quickly receive fresh and relevant information in a convenient and intuitive format. Daily-Peak is created using modern technologies, which ensures high performance and scalability both on the server and client side.
Some functionality is still not working and there are still a few bugs in the mobile version, the project still needs tweaking, which I will have to do.
How it works ⚙️
Back-end 🗄️
The server folder contains the main application file that starts the server and establishes a connection to the database (MongoDB). Here we use Express for organizing routes and API, Imagekit for storing photo and video resources, authorization is done through Clerk, a special webhook was written for this purpose. All this server is started with Render.
Front-end 🖥️
On the client side, I used React + Vite . After running the "build" script, a new dist folder is created, in which an index.html file is also created, it is this file that is rendered on the site after the build. For handling routing within the application, I integrated react-router-dom. Data fetching and caching are streamlined using @tanstack/react-query, while HTTP requests are managed by Axios. For user authentication, I relied on @clerk/clerk-react. Image management is handled efficiently through imagekitio-react. Additionally, the UI is enhanced with react-icons for versatile iconography, while infinite scrolling functionality is provided by react-infinite-scroll-component. For rich text editing, I implemented react-quill-new, and user notifications are facilitated by react-toastify. Lastly, timeago.js is used to display relative time in a user-friendly format (e.g., “5 minutes ago”).
How to run the project locally
Important: Before launching, make sure to create .env files in the appropriate folders (as specified in .env.example) with the necessary settings for connecting to the database, external services and secret keys.
How to start Front-end side :
- You must enter the client folder
cd client/- Next, you should install all the dependencies
npm install- And at the end, start the server
npm run devHow to start Back-end side :
- You must enter the server folder
cd server/- Next, you should install all the dependencies
npm install- And at the end, start the server
npm run devTechnologies used
- React.js + Vite- Clerk
- MongoDB / Mongoose
- Imagekitio-react
- Node.js
- Express.js
- JWT
- TailwindCSS
- React-Query
- React-Router-Dom
- React-Quill
- React-Infinite-Scroll-Component
- React-Icons
- timeago.js