Improving Upon My React Application "Postr"

Tasked with creating a React application that features client-side routing, I wanted to mimic a typical social media style news feed. As an avid Twitter user, you'll see this is heavily "inspired" by twitter's format.

My goal (within the confines and time constraints of this project) was to get down the basic login and post features. Therefore, there are so many possibilities for additional features that could be added.

Firstly, I wanted to focus on features I could've added given my current skillset. Since I was only required to use GET and POST, I opted not to use PATCH and DELETE requests. My component structure is as follows:

App
└───Login
or
├───NavBar
└───Home
    └───Post
├───Account
└───UserList

Once simple way to incorporate PATCH and DELETE requests would be like buttons and delete buttons on each individual post. Since I would put these two buttons onto my Post component, I think it makes sense to code these two requests within the Post component.

In addition to interacting with the server, I need to update my feed state variable in my App and Home components. Given my current destructured props in my Post Component:

I would need to add feed and setFeed as props to Post. This would also allow me to add more stats to the Account page such as # of like or # of deletes.

Currently there is not much info on the Account page, but if this application required a real login, password, email, cell-phone, etc. this would be the location for it.

Lastly, the third component UserList could be modified to search posts instead of usernames. This is the code for my current UserList component:

It takes in the feed variable from App and uses it to get a non-duplicated array of usernames. I could also switch this to search for posts instead of usernames.

Simply by switching the conditional in the if statement, i can check the text of the posts (turns out to be easier the way I originally did it):

const matchingPosts = feed.map((post)=> {
        if (post.text.includes(search)) {
            return <li key={post.id}>{post.text}</li>
        }
    })

I could also return a Post component and it might look more like a real application. There could be a toggle for filtering by username or post content. CSS could use some work. Lots and lots of options.

Theres still endless possibilities this could be taken but I think for now, I'm content with where its at.