vivid-blog

Rudra Trivedi

Project Description The goal of this project is to create a Blog web application using Node.js, Express.js, and EJS. The application will allow users to create and view blog posts. Posts will not persist between sessions as no database will be used in this version of the application. Styling will be an important aspect of this project to ensure a good user experience. Example http://www.paulgraham.com/articles.html Deliverables • One Node project for the function of the website • Including at least one EJS file for the structure of the website • Including at least one CSS file for the styling of the website Features 1. Post Creation: Users should be able to create new posts. 2. Post Viewing: The home page should allow the user to view all their posts. 3. Post Update/Delete: Users should be edit and delete posts as needed. 3. Styling: The application should be well-styled and responsive, ensuring a good user experience on both desktop and mobile devices. Technical Requirements 1. Node.js & Express.js: The application will be a web server built using Node.js and Express.js. Express.js will handle routing and middleware. 2. EJS: EJS will be used as the templating engine to generate dynamic HTML based on the application's state. Timeline Hour 0: Planning • Gather content and design ideas, create wireframes and mockups. Plan out how the application will work, which routes might be necessary and which pages need to be made. Hour 1: Setup • Set up the project repository, initialize the Node.js application, and install necessary dependencies (Express.js, EJS). • Create the application structure, including routes, views, and static files. • Set up the Express.js server and define the necessary routes. Hour 2-3: Implementing Features • Implement the post creation feature. This includes creating the form on the home page and handling the form submission in the server. • Implement the post viewing feature. This includes displaying all the posts on the home page. • Implement the post edit feature. This includes using a form to load the existing blog post and allowing the user to edit and save the post. • Implement the delete feature. This allows the user to click a button and remove the post from the home page. • Test the application to ensure that post creation and viewing are working correctly. Hour 4-5: Styling and Polishing • Style the application. This includes creating a CSS file, linking it to your EJS templates, and writing CSS or using Bootstrap/Flexbox/Grid to style the application. • Test the application on different devices and browsers to ensure the styling works correctly. • Fix any bugs or issues that came up during testing

Comments (0)

No comments yet. Be the first!

Page 1 of 4

System Requirements Document (SRD) for vivid-blog

1. Introduction

The vivid-blog project aims to create a responsive and user-friendly blog web application. This application will allow users to create, view, edit, and delete blog posts. The focus is on simplicity, functionality, and an aesthetically pleasing design. The application will be built using Node.js, Express.js, and EJS as the templating engine. Styling will be a key aspect to ensure a seamless user experience across devices.

This document outlines the system requirements for the vivid-blog project, detailing the functional and non-functional requirements, user personas, visual design, and technical specifications.

2. System Overview

The vivid-blog application will serve as a lightweight blogging platform where users can:

Create and manage blog posts.
View all posts on the homepage.
Edit or delete existing posts.
Experience a responsive and visually appealing interface.

The application will not use a database in this version; instead, posts will exist only during the session. The backend will be powered by Node.js and Express.js, while EJS will handle dynamic HTML rendering. The application will include a CSS file for styling, ensuring responsiveness and cross-browser compatibility.

3. Functional Requirements

The following are the functional requirements for vivid-blog, expressed as user stories:

As a User, I should be able to create new blog posts using a form.
As a User, I should be able to view all blog posts on the homepage.
As a User, I should be able to edit an existing blog post.
As a User, I should be able to delete a blog post.
As a User, I should experience a responsive and visually appealing design on both desktop and mobile devices.

Page 2 of 4

4. User Personas

The vivid-blog application will cater to the following user personas:

User:
- Primary user of the application.
- Can create, view, edit, and delete blog posts.
- Expects a simple and intuitive interface.
Guest:
- A visitor who can view the blog posts but cannot create, edit, or delete them.

5. Visuals Colors and Theme

The vivid-blog application will adopt a modern and vibrant theme to align with its name. The proposed color palette includes:

Primary Color: Vivid Blue (#007BFF) – for buttons, links, and highlights.
Secondary Color: Soft White (#F8F9FA) – for the background.
Accent Color: Bright Orange (#FF5722) – for call-to-action elements.
Text Color: Dark Gray (#343A40) – for readability.
Hover Effects: Subtle transitions with lighter shades of the primary and accent colors.

The typography will use a clean and modern sans-serif font like Roboto or Open Sans for readability.

6. Signature Design Concept

To make vivid-blog unforgettable, the homepage will feature a dynamic "living canvas" design. Here's how it will work:

Background Animation: The homepage will have a subtle animated gradient background that shifts colors dynamically, creating a "living" effect. The colors will transition between shades of blue, orange, and white, reflecting the vivid theme.
Interactive Blog Cards: Each blog post will be displayed as a card. When hovered over, the card will "flip" in 3D, revealing a snippet of the post content on the back.
Floating Header: The header will remain fixed at the top with a slight transparency effect, giving the illusion of floating as users scroll.
Micro-interactions: Buttons and links will have smooth hover animations, such as color changes and slight enlargements, to enhance interactivity.
Responsive Design: On mobile devices, the cards will stack vertically, and the animations will adapt to touch gestures.

This design will ensure that vivid-blog stands out as a visually captivating and interactive platform.

Page 3 of 4

7. Non-Functional Requirements

Performance: The application should load within 2 seconds on a standard broadband connection.
Responsiveness: The application must be fully responsive and functional on devices with screen sizes ranging from 320px to 1920px.
Cross-Browser Compatibility: The application should work seamlessly on modern browsers, including Chrome, Firefox, Safari, and Edge.
Scalability: The application should be designed to allow for future integration with a database and additional features.
Maintainability: The codebase should follow best practices for readability and modularity.

8. Tech Stack

The following technologies will be used to develop vivid-blog:

Frontend

EJS: For dynamic HTML templating.
CSS: For styling, with the option to use Bootstrap or Flexbox/Grid for layout.

Backend

Node.js: For server-side scripting.
Express.js: For routing and middleware.

Local Orchestration

Docker: For containerization (optional for future scalability).

Tools

Git: For version control.

9. Assumptions and Constraints

Assumptions:
- Users will not require authentication in this version.
- Posts will not persist between sessions as no database is used.
- The application will be deployed locally or on a simple hosting service.
Constraints:
- No database integration in the current version.
- Limited to the features outlined in the functional requirements.

Page 4 of 4

10. Glossary

Node.js: A JavaScript runtime built on Chrome's V8 engine.
Express.js: A web application framework for Node.js.
EJS: Embedded JavaScript templating, used to generate HTML with dynamic content.
CSS: Cascading Style Sheets, used for styling web pages.
Responsive Design: A design approach that ensures the application works well on devices of all sizes.
Session: The duration of a user's interaction with the application, typically ending when the browser is closed.

This document provides a comprehensive overview of the vivid-blog project. Rudra, if you have any additional requirements or changes, feel free to share them!