xcg1234/news

A full stack newsfeed app using MERN

---

---

Written with StackEdit.
**

News Feed App

The App is available here: NoteNews
If you don’t want to register a new user, simply use the following credentials to log in:

Email: [email protected]
Password: 123456

This is a full stack web app using MERN technology.
Key features are:

• Landing Page with Login/Register feature.
  
  
  
• After logging in, the homepage will pull the latest news happening in the world from GNEWS API. Click the title will bring you to the external newspage.
  
• Notes Hub section will display notes written by different users. You can see all posts from different users under different emails.
  
• Add notes page will allow user to add their notes to the Notes Hub. This is where you can add your own post to the hub.
  
• My Notes page will allow you to see your own posted notes stored in the MongoDB database and make modification such as edit and deletion
  

Key Features that fulfill the requirements:

Since there are requirements for this project, let me present which part of my app meets those requirements, so you don’t have to spend time looking.

• Languages: I used TypeScript as the language choice and backend running on Express server on Node.js runtime.

• UI Design:
  Hierarchy implementation:

• Place important actions at the top or side of the screen, like navbar/sidebar.

• Place related items of a similar hierarchy next to each other.

Grouping:

• Items can be grouped under headings that communicate what the groupings are. These groups organize content spatially.

Contrast ratios:

• Use higher contrast makes the imagery easier to see. Icons follow the color contrast ratio recommendations and are legible against their backgrounds.

Indicating elements by action:

• Instead of showing the icon only, have the text next to it describes what an element does without relying on visual acuity.

Use proper “alt” for image:

• If the image is purely decorative, can leave the alt empty (alt=""), for news image, it might or might not be decorative, so if the parameter from the API has something like alt_text, we can use that in our <img> tag.

• Architecture Pattern:

• App has frontend and backend two main parts.

• Frontend has pages folder including several pages to display content for the website, like news pages, post pages, add pages etc. It also has components folder containing Sidebar, Layout and Spinner (for loading animation) used in different pages as reusable components.

• Backend has two main folders:
  models: containing schemas created using Mongoose for create post and user, the first one contains keys like “title”, “description”, “content”, etc. The User schema has “name”, “email”, “password”, etc. Generally speaking, the model looks like something like this:
  const newsItemSchema = new mongoose.Schema( { title: { type: String, required: true, }, content: { type: String, required: true, }, description: { type: String, required: true, }, postedBy: { type: Object, }, }, { timestamps: true, } );
  Simple and straight forward if you have any experience in MongoDB.

routes: containing newsRoute and userRoute. newsRoute is responsible for the CRUD operations of creating new notes to the notes hub page, edit and delete user’s own notes, and get all notes posted by all users.
userRoute is responsible for registering and login functionality.

Take one example, POST/getallpostbyuserid, the code is following:

newsRoute.post('/getallpostbyuserid', async (req: Request, res: Response) => {
try {
	const newItem = await NewsItems.find();
	const userPosted = newItem.filter(
		(obj) => obj.postedBy.userid == req.body.userid
	);
res.send(userPosted);

} catch (err) {
res.status(400).send(err);
}});

First this is a POST method, which means we are finally going to send something. We first investigated NewsItems database and use the find() method to return all object store in an array. Then, we use the JavaScript high order function filter to narrow down the target by setting the rules, in this case, we are going to find all the posts inside our database that matches our current userid. We then send this to the front-end and it will get rendered to the front-end page.
Please refer to the diagram below for the pattern. (For higher resolution please visit: link)




 3rd Party API

This app uses the news feed API from GNews.io (https://gnews.io/docs/v4#introduction)

I’m using the free tier so it will retrieve 10 news per request. The country has been set to US. Here are the results.




 At least 5 mererial-UI icons.





















 Example of reusable component:

As you can see from the previous webpage picture. The sidebar and top header are universal across every page. Also, the edit notes page and add notes page share the same structure, as well as login and register UI, they share the same UI design.