Confirm?

Are you sure you want to proceed?
D
Daniel Ardévol

Reddit-Style Post Page with Dark/Light

Clone & Customize via AI

Simple Blazor Feed page that implements a post composer and a scrollable PostCard list. Uses EditForm validation and InputFile image upload with Bootstrap form-control styling.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Post composer form (EditForm) with Title, Text and Image inputs, client-side DataAnnotations validation and submit spinner. - Image file selection via InputFile and client-side read to a base64 data URL (5MB limit in demo). - In-memory feed rendered as a list of PostCard components with image preview and truncated text preview. - Voting UI in each PostCard with Upvote/Downvote handlers and disabled state after voting. - Theme toggle wired to a data-bs-theme attribute and scoped CSS variables for light/dark visual switch. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputTextArea, InputFile and @bind-Value bindings - PostCard component (Parameterized), PostViewModel model class - @onclick handlers, IBrowserFile, spinner UI and conditional rendering ## How it works - The composer binds a PostViewModel instance (newPost) to an EditForm and uses OnValidSubmit to call HandlePostSubmit. - LoadImage captures IBrowserFile from InputFile.OnChange; HandlePostSubmit reads the stream to a byte[] and converts it to a data URL for preview. - New posts are inserted into an in-memory List<PostViewModel> (posts) at the top of the list. - PostCard receives a Post parameter and mutates Votes, HasVoted and VoteType locally via Upvote/Downvote methods, which disable further votes. - isLoading toggles UI state and disables the submit button while the file read and model update run. ## Styling - Uses Bootstrap utility and component classes (container, card, form-control, btn, list-group) for layout and responsiveness. - FontAwesome icons are used for branding, actions and feedback. - Scoped CSS in RedditClonePage.razor.css references Bootstrap CSS variables (var(--bs-...)), adds animations for voting feedback and a text clamp for previews. ## Reuse steps 1. Add RedditClonePage.razor, PostCard.razor and PostViewModel.cs to a Blazor project and adjust namespaces. 2. Ensure Bootstrap CSS is included (default in Blazor templates) and include FontAwesome for icons used by the components. 3. Import Microsoft.AspNetCore.Components.Forms (or update _Imports.razor) to use EditForm and InputFile types. 4. Replace the in-memory List<PostViewModel> with an injected persistence service or API client registered in Program.cs. 5. Move file uploads to server-side storage or a blob service; validate and sanitize uploads and remove client-side base64 for large files. 6. Add authentication/authorization to populate Author and to persist per-user votes safely. ## Limitations & next steps - Demo keeps posts in-memory; data will not persist across reloads and lacks pagination/virtualization. - Author is hardcoded; no authentication or authorization is implemented in the page. - Image handling converts files to base64 in memory which is not production-grade; implement server-side uploads or blob storage. - No server-side validation, moderation, search or paging; add API endpoints and persistence for production use. - Consider accessibility reviews, input sanitization, and optimistic UI updates for better UX.