Scribbler is a feature-rich blog site that allows users to create, edit, and manage their blogs. It offers a user-friendly interface with beginner-friendly UI elements and a responsive design. With Scribbler, users can write blogs using Markdown language, upload thumbnail images for their blogs, and interact with other users by viewing their profiles.
It is made using react+javascript+chakra_UI from VITE as frontend and node+express+mongodb as backend.
- Node.js (v12 or above)
- MongoDB (Make sure MongoDB is installed and running on your system)
- Clone the Scribbler repository from GitHub:
git clone https://github.com/your-username/scribbler.git
- Navigate to the project directory:
cd scribbler
- It has two folders:
clientandserver.First Navigate to theserverfolder:
cd server
- add a .env file in the server folder and add the following code in it:
MONGO_URI = <your mongodb url>
PORT = <desired port>
JWT_SECRET = <your jwt secret>
- Install the dependencies:
npm install
- Start the server:
npm run test
-
Server should be now running on your desired port.
-
Open another terminal and navigate to the
clientfolder:
cd client
- Add a .env file in the client folder and add the following code in it:
VITE_API_URL = http://localhost:<your port>
- Install the dependencies:
npm install
- Start the client:
npm run dev
- Client should be now running on your port open the browser and go to
http://localhost:<PORT>to view the site.
- Scribbler is a fully functional CRUD (Create, Read, Update, Delete) application.
- Users can create new blogs, view their own blogs, edit existing blogs, and delete unwanted blogs.
- Users can create and customize their profiles with avatars.
- Avatars provide a visual representation of the user across the site.
- Users can update their profile information, including name, bio, and avatar image.
- Scribbler offers a markdown editor that allows users to write blogs using the Markdown language.
- The markdown editor provides a simplified and intuitive interface for creating richly formatted blog content.
- Users can upload and attach thumbnail images to their blogs.
- Thumbnail images provide visual representation and attract readers to the blog.
- Users can explore and view profiles of other users.
- This feature allows users to discover and connect with fellow bloggers on the platform.
- Scribbler offers a dark mode option for users who prefer a darker color scheme.
- The dark mode enhances readability and reduces eye strain in low-light environments.
- Scribbler is designed to be fully responsive, ensuring a seamless experience across various devices and screen sizes.
- Users can access and interact with the blog site from their desktops, tablets, and mobile devices.
- Scribbler implements infinite scrolling, allowing users to scroll through an endless stream of blogs.
- As users reach the end of the current blog list, more blogs are dynamically loaded, providing a smooth browsing experience.
- Skeleton screens are used throughout Scribbler to enhance the user experience while content is being loaded.
- Skeleton screens provide visual placeholders that mimic the structure of the content, giving users a sense of progress and responsiveness.
- Scribbler incorporates custom alerts to provide informative feedback and notifications to users.
- Alerts are used to confirm successful actions, notify errors, and guide users through different interactions within the site.
- The user interface of Scribbler is designed with beginners in mind, ensuring a user-friendly experience for users who are new to blogging.
- The UI elements are intuitive and easy to navigate, enabling users to focus on their writing and interaction with the platform.
Feel free to contribute to this project and make it better. If you have any doubts or want to contact me, you can reach me at my email.