Frontend Mentor - Notifications page solution

This is a solution to the Notifications page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Distinguish between "unread" and "read" notifications
• Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Desktop Version

Mobile Version

Links

• Solution URL: frontendmentor.io/solutions
• Live Site URL: notifications-page-gamma.vercel.app

My process

• Install Vite for module bundlers.
• Choice react typescript as library.
• Install tailwind css and do some utility config for this challenge, like custom breakpoints screens, colors, font family etc.
• Breakdown the design into piece components for single responsibility principle (SPR).
• Input the data(dummy) from challenge to index.tsx
• Mobile first to implements the CSS with tailwind.
• Build props from data with parents to children.
• Implements css for desktop.
• Editing and testing on localhost.
• Commit and push to github.
• Build with vercel.
• Editing and so on.

Built with

• Flexbox
• CSS Grid
• Mobile-first workflow
• React Typescript - JS library
• Vite - Module Bundlers
• Tailwind CSS - For styles
• Vercel - Deployment

What I learned

This challenge i'm learning a lot about props to separate data(etc:dummy) with component's, and then using ternary condition for object to call component.

See code below:

import AvatarNotif from "./AvatarNotif";
import PrivateMessage from "./PrivateMessage";
import { accounts } from "../constants";

const CardAvatar = () => {
  return (
    <div className='just css class'>
      {accounts.map((account) => (
        <AvatarNotif
          srcAvatar={account.avatar}
          name={account.name}
          altAvatar={account.alt}
          about={account.about}
          destiny={account.destiny}
          status={account.status}
          time={account.time}
          imageCommented={account.imageCommented}
          altImageCommented={account.altImageCommented}
          classAbout={account.classAbout}
          classCard={account.classCard}
          children={
            account.isHasChildren ? <PrivateMessage pm={account.pm} /> : ""
          }
        />
      ))}
    </div>
  );
};

import Avatar from "./Avatar";

const AvatarNotif = (props: any) => {
  const {
    srcAvatar,
    name,
    about,
    destiny,
    time,
    classCard = "just css clas",
    children,
    altAvatar,
    altImageCommented,
    imageCommented,
    status,
    classAbout = "just css class",
  } = props;
};

import {
  AvatarAngelaGray,
} from "../assets/IndexImages";

export const accounts = [
  {
    id: "mark-webber",
    avatar: AvatarMarkWebber,
    name: "Mark Webber ",
    alt: "Mark Webber Avatar",
    about: "reacted to your recent posts ",
    destiny: "My first tournament today! ",
    status: "  🔴 ",
    time: "1m ago",
    pm: "",
    imageCommented: "",
    altImageCommented: "",
    isHasChildren: false,
  },
];
...

Continued development

For continue development like this challenge, i want give few hooks with useStats in notif and number counter, if client doing click and then counter do decrement with disable blue highlight, same with function "mark all as read".

Useful resources

• React Docs - This helped me for react fundamental like props, components and using useState. I really liked this explanation and will use it going forward.
• Tailwind Elements - This is an amazing reference which helped me guiding the design. I'd recommend it to anyone still learning this concept and example.

Author

• My Website - GUIDOFAMULA.COM
• Frontend Mentor - @guidofamula
• Linkedin - Guido Famula