Blog app

A Place for Thoughts, Stories, and Sharing

Try the app

Discover the details about the app on screen

test id: guest@abc.com
test password: guest123

Input Text

What we told Appbuildchat AI.

I'm trying to make a blog app. When writing a blog post, the title input field should be at the top, and it should be possible to attach videos and photos. However, when writing a blog post, photos and videos should be attached to the location where the cursor is, and the next post should be inserted. The home screen should list blog posts that other people have posted. Each list should have a title, omitting the main text, and a photo or thumbnail of the media (photo/video) at the very beginning. The bottom bar should consist of Home, Add Post (+), and Profile. On the profile screen, list my profile picture, the number of posts I've posted, and my bio (1 line) at the top, and below that, list the list of posts I've posted, just like on the home screen. The feature I want is the ability to share each post with a link. I want to share posts with links in comments using this sharing feature.

I want a dark theme and also add a search part in the search screen and bottom bar.

Appbuildchat AI Output

What Appbuildchat AI sent.

Here's a modified plan for your blog app based on your updated requirements:

Design Theme

- Theme: Dark Theme

- Icon/Button Color: Cyan (#00BCD4)

- Button Shape: Rounded corners with a radius of 8dp

App Structure and Functionality

1. Home Screen

- Layout: A vertical list of blog posts.

- Post Item:

Title: Displayed prominently at the top of each post item.
Media Thumbnail: Displayed at the very beginning of each post item, either a photo or a video thumbnail.
Navigation: Tapping on a post item navigates to the Post Detail Screen.

- Bottom Navigation Bar:

Home Icon: Located on the left, navigates to the Home Screen.
Search Icon: Located next to the Home Icon, opens the Search Screen.
Add Post (+) Icon: Located in the center, opens the New Post Screen.
Profile Icon: Located on the right, navigates to the Profile Screen.

2. New Post Screen

- Title Input Field: Positioned at the top of the screen for entering the blog post title.

- Content Editor:

Rich Text Editor: Allows text formatting and insertion of media.
Media Attachment: Users can attach photos and videos at the cursor's current position within the text.
Insert Media Button: A button within the editor to open the media picker for selecting photos/videos.

- Post Button: Located at the top-right corner, to publish the post.

3. Profile Screen

- Profile Header:

Profile Picture: Displayed at the top-left.
Post Count: Displayed next to the profile picture.
Bio: A single line of text displayed below the profile picture and post count.

- User's Posts List:

Layout: Similar to the Home Screen, listing the user's posts with titles and media thumbnails.
Navigation: Tapping on a post item navigates to the Post Detail Screen.

4. Post Detail Screen

- Post Content: Displays the full content of the post, including text and media.

- Share Button: Located at the top-right corner, allows sharing the post via a link.

- Comments Section:

Comment Input Field: Allows users to add comments.
Share Link in Comments: Users can paste shared links in comments.

5. Search Screen

- Search Bar: Positioned at the top of the screen, allows users to search for blog posts by title or content.

- Search Results: Displays a list of posts matching the search query, similar to the Home Screen layout.

- Navigation: Tapping on a search result navigates to the Post Detail Screen.

Additional Features

- Responsive Layout: Ensure the app is responsive and works well on various screen sizes.

- Form Validation: Validate inputs such as title and content before allowing a post to be published.

- Back Navigation: Standard back navigation to return to the previous screen.

- Error Handling: Display error messages for network issues or failed operations.

This plan incorporates your request for a dark theme and adds a search functionality accessible from both the bottom navigation bar and a dedicated search screen. The app is designed to provide a user-friendly experience while meeting your specified requirements.

‍

Screenshots

Check out the screenshots of the App