vivid-blog
Rudra TrivediProject 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)
Sign in to leave a comment
Project Tasks8
Implement Theme & Structure
As a user, I want to experience a visually consistent and responsive interface so that the application looks exactly identical to the mock-design pages. This task covers: applying the vivid theme (Vivid Blue #007BFF, Soft White #F8F9FA, Bright Orange #FF5722, Dark Gray #343A40), setting up Roboto/Open Sans typography, implementing the animated gradient background, floating fixed header with transparency, and global micro-interaction hover effects. Also remove any scaffold pages not present in the design (login, signup, welcome, dashboard pages). Scope: global CSS file, EJS layout/partials, and base structure alignment across all pages.
Implement Posts Backend API
As a user, I want the backend to handle all blog post operations so that I can create, view, edit, and delete posts seamlessly. Implement Express.js routes for full CRUD operations on in-memory posts store: GET / (list all posts for Home), GET /posts/:id (single post view), GET /posts/new (create form), POST /posts (create post), GET /posts/:id/edit (edit form), PUT/POST /posts/:id (update post), DELETE/POST /posts/:id/delete (delete post). No database — use session-scoped in-memory array. Ensure proper redirects after each operation.
Build Create Post Page
As a user, I want to create a new blog post using a form so that I can publish my content to the homepage. Implement the Create Post page based on the existing JSX design (v1). Includes: form with title input, content/body textarea, submit button (Vivid Blue primary), cancel/back navigation, and client-side basic validation. On successful submission, POST to Express.js route that adds post to in-memory session store and redirects to Home page showing the new post.
Build Edit Post Page
As a user, I want to edit an existing blog post using a pre-populated form so that I can update my published content. Implement the Edit Post page based on the existing JSX design (v1). Includes: form pre-populated with existing post title and content, save/update button, cancel/back navigation, and client-side basic validation. On successful submission, PUT/POST to Express.js route that updates the in-memory post and redirects back to Home page with updated post visible.
Build Post View Page
As a user, I want to read the full content of a blog post so that I can consume the complete article. Implement the Post View page based on the existing JSX design (v1). Includes: full post title, author/date metadata, full body content rendering, back-to-home navigation button, and Edit/Delete action buttons for the post owner (User persona). Linked from Home page blog cards. On completion, returns user to Home page.
Build Home Page
As a user, I want to view all blog posts on the homepage so that I can browse and read post previews. Implement the Home page based on the existing JSX design (v1). Includes: animated living canvas gradient background, interactive 3D flip blog post cards with hover effects, fixed floating header, 'New Post' CTA button (Bright Orange), and responsive card grid (stacks vertically on mobile). Entry point for both Guest (browse/read previews) and User (view all posts, navigate to create/edit/delete). Links to: Post View page, Create Post page, Edit Post page.
Implement Responsive & Cross-Browser Styling
As a user, I want the application to look and work great on all screen sizes and browsers so that I have a consistent experience on desktop and mobile. Ensure full responsiveness from 320px to 1920px: blog cards stack vertically on mobile, touch-friendly interactions replacing hover animations, fluid typography scaling. Test and fix layout across Chrome, Firefox, Safari, and Edge. Validate the animated gradient background, 3D card flip, and micro-interactions degrade gracefully on older browsers. Target page load under 2 seconds.
Implement Delete Post Feature
As a user, I want to delete a blog post with a single click so that I can remove unwanted content from the homepage. Wire up the Delete button on the Home page and Post View page to send a DELETE/POST request to the backend. The backend removes the post from the in-memory store and redirects to the Home page. Ensure the deleted post no longer appears in the post list. Optionally add a confirmation prompt before deletion to prevent accidental deletes.
No comments yet. Be the first!