All solutions

I implemented Next JS dynamic routing and the layout feature during this project. All planet section has their links:

[planets]/overview
[planets]/structure
[planets]/surface

Time spent on this project: 16 hours 39 minutes

To manage the state I've used

markdownAtom.ts;

type MarkdownDataType = {
  createdAt: string;
  name: string;
  content: string;
  id: string;
};

  data: MarkdownDataType[];
  isLightMode: boolean;
  isSidebarOpen: boolean;
  isDeleteModalOpen: boolean;
  activatedMarkdownPart: ActivatedPartType;
  activeMarkdownId: string;
  inputMarkdownValue: string;
  isReloaded: boolean;

isReloaded is created to prevent the infinite loop

React-markdown

The first time I used it. Was surprisingly easy to implement markdown to the project. More work was done with formatting elements to match the design.

Radix-UI

To improve accessibility:

• radix-ui/react-switch - light and dark mode switcher
• radix-ui/react-dialog - delete markdown modal
• radix-ui/react-navigation-menu - navbar and sidebar with keyboard navigation

I am not sure if there is a better way to implement keyboard navigation than this:

  useEffect(() => {
    const submitKeyboard = (e: KeyboardEvent): void => {
      const key = e.key;
      if (key === "q")
        setGameStatus((prev) => ({ ...prev, isDarkMode: !prev.isDarkMode }));
    };
    window.addEventListener("keydown", submitKeyboard);
    return () => {
      window.removeEventListener("keydown", submitKeyboard);
    };
  }, [setGameStatus]);

Keyboard navigation:

• Toggle Dark / Light Mode - q
• Answer A / First category - a
• Answer B / Second category - b
• Answer C / Third category - c
• Answer D / Fourth category - d
• Process to the next question / Restart after quiz ends - Enter

React Hooks Form

The first time I was using it with the useFieldArray hook to generate a dynamic form I depended on the user links. It was useful for adding and removing links. It was quite challenging was connect the React Hooks Form with the Radix UI Select element. Finally, I managed to solve the problem using the Controller from React Hooks Form.

React Recoil

To manage the state I've used

userAccountAtom.ts;

It keeps all the users' information he provided. It's updating on every user change.

  firstName?: string;
  lastName?: string;
  email?: string;
  picture?: string;
  userLink: UserLink[];
  isLoaded: boolean;
  isAvatarChanged: boolean;

isLoaded is preventing from loading data from the firebase more than one time. userLink array takes care of all links created by the user

type UserLink = {
  platform: PlatformsType;
  link: string;
  id: string;
  order: number;
};

order was created to have the correct position on the application and on the firebase. When the user uses drag and drop it also updates the order and the Firebase collection

const snippetQuery = query(
  collection(firestore, `users/${userId}/userLinks`),
  orderBy("order", "asc")
);

React-loading skeleton

Improve the user experience when the web is loading.

react-icons

Instead of the SVG icons I've used react-icons.

react-spinners

Was used to show the loading state on the buttons when the changes are updated to the firebase.

Firebase

Was used to save user details to the Firebase. It keeps all provided by user credentials. Links are stored in the userLinks collection:

type UserLink = {
  id: string;
  link: string;
  order: number;
  platform: PlatformsType;
};

Avatars are stored in the Firebase storage in the folder:

`avatars/${userId}/image`;

dnd-kit

Was used for drag and drop links features.

Radix-UI

To improve accessibility:

• radix-ui/react-dialog was used to log in and Register Modal
• radix-ui/react-navigation-menu to the Navbar
• radix-ui/react-select displays a list of all platforms that the user can choose
• radix-ui/react-toast for the popUp when using save changes or copy the user link to the clipboard

Continued development

• Right now all links have unique backgrounds and font colors. Improve user options to have a way to change the color of each platform.
• Give users a way to add additional platforms.

Drag and Drop

During this project, I've learned how to work with dnd-kit and make draggable content based on examples provided by their playground. You can use drag and drop to change board order on the big screen. You can drag any task between columns. On AddBoardModal and EditBoardModal you can change column order. On AddTaskModal or EditTaskModal you can change the subtask order

Radix-UI

First time I've used it. I wanted to try to improve accessibility features on my project. Beginning was hard but I managed to prepare this app using Radix-UI

FireBase

You can log in by clicking the login button, LoginModal will open if you don't have an account, you have to sign up using RegisterModal, and any changes you do to your task will be uploaded to the FireBase. It also tracks if you have DarkMode On and which current opened board.

React-firebase-hooks

It was used for login and sign-in purposes

useCreateUserWithEmailAndPassword(auth);

useSignInWithEmailAndPassword(auth);

React-loading-skeleton

To improve the user experience when the web is loading

Recoil

For managing states through project boardAtom - when the page is loaded, it keeps all boards, and it's updated with every change modalAtom - keep tracking if any of the models are opened and if yes which one should be opened settingsModalAtom - tracks:

darkMode: boolean;
isSidebarOpen: boolean;
isLoaded: boolean;
activeBoard: string;
isBoardModalListOpen: boolean;
activateColumn: number;
activateTask: number;
activateTaskName: string;

Features improvement

On Firebase all users' boards are uploaded with one property, for performance and readability, creating a collection for each board will be better. In some situations, the code is not DRY. In the future refactor the code to be drier.

Also because the database has a lot of nested levels I'm not sure mapping a couple of times to update a task is a good practice but I couldn't find another solution for this And this nested mapping is occurring a few times in my project.

const updatedBoard = boardState.map((board) => {
if (board.name === settingState.activeBoard) {
const activatedColumns = board.columns.map((col) => {
if (col.name === getValues("status")) {
const updatedTask = col.tasks.map((task) => {
return task.id === editedTask?.id ? editedTask : task;
});
return { ...col, tasks: updatedTask };
}
return col;
});
return { ...board, columns: activatedColumns };
}
return board;
});

I found this project to be quite challenging. I couldn't find any other way to create a circular progress bar besides using SVG.

To manage states I've used React Recoil. breakTypeAtom to manage which break is active and the actual time of it, settingsAtom is taking care of which color, and font is activated, if Modal is open, and if the clock is paused.

Current font and color I passed through useSettings hook.

This was the most challenging project so far. I had problems with creating proper logic for checking who is the winner. The hardest was with diagonal checking. I've created 3 separate functions for this,

checkRows();
checkColumns();
checkDiagonals();

each of them is creating a new corresponding array, and this array is used with

checkWinner([arrayToCheck]);

to check if the actual row, column, or diagonal is the winner.

The most challenging part was inserting a rounded SVG background in the proper position. I've spent some time solving it but overall I'm happy with the result.

During this challenge first time, I was working with Firebase and Chakra UI.

I had a problem importing provided SVG icons with Chakra UI; because of that, I used icons from react-icons.

When I was implementing Firebase into this project primarily I relied on a youtube guide Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course

You can create a user, log in, update your avatar, and clear your bookmark.

I have noticed that when you upload your avatar and refresh the page the default avatar will show up but when I tested it on my localhost was fine. Any advice on how to fix it will be very appreciated

If you are not logged in and you click on the play button, the login modal will pop up.

I was time first working with react-hook-form. I was surprised by how was easy to handle errors when the user wrote wrong information.

This was my second time working with Tailwind CSS. I still have a problem preparing grid templates properly according to the design and making them responsive.

Tailwind CSS

The first time I use Tailwind CSS, I will be grateful for any advice on how to use it better. The hardest part was to set up the grid according to the design. In tailwind.config.cjs I've added templates for columns and rows. Without Tailwind CSS I was using

grid-template-areas

but with it, I wasn't sure how to do it.

Resize

During resizing the page from big to small last row of the grid acted weird and I added another media query. It works better than before but still, it has white spaces I couldn't figure out another way to solve this problem.

The hardest part was to set up Leaflet API to work as it should for this project. For some reason, Adblock is blocking Geolocation API and it needs to be turned off.

I wasn't able to create content swtich using keyboard

I'm not satisfied with the rounded icons. The icons are not completely centered.

Also, I wasn't sure how to do correctly the hover and focus effects on the buttons, so I've only used opacity.

For each part of the page I've tried to created a custom component in React. But I don't know if they were used correctly:

• Navbar,
• Hero,
• Links, for the links section
• Link, for each individual link
• Body
• Footer