Clean up the code and include best practices

[monsefot]

@mathcodes , I focused on the leetcode page and its related pages, I will continue working on other pages as well these are the general changes that I've made to this branch, there were some bad practices in the code I tried to fix them all:

also the solutions of the problems in the /data/ folder I will convert them to json based data files later.

• [x] remove useless imports
• [x] remove the /pages/page.css and convert the css margin to a tailwind one
• [x] rename the pages default exported function with the same name of the component (the names were PageTemplate)
• [x] clean up the leetcode page' code
• [x] inhance the /data/images.js way of export images (map instead of array)
• [x] rename the problemset table to ProblemSetTable.jsx and the components file to ProblemSetTable/index.jsx
• [x] remove unnecessary tailwind classes in the leetcode page & improve the conditioned tailwind classes
• [x] using json based data files other than js ones
• [x] make the scrolling behavior of the table auto
• [x] implement auto icons importing based on the icon names in the json datafile
• [x] build template page for leetcode ,hackerrank & codeforces also I removed the repeated code
• [x] build a template page for all coding solutions and I put them in one data file

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lc-hr-cw	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 15, 2023 10:51am

[ghost]

👇 Click on the image for a new way to code review

#### [](https://app.codesee.io/r/reviews?pr=172&src=https%3A%2F%2Fgithub.com%2Fmathcodes%2Fcontentfordevelopers) #### Legend

[monsefot]

I found a lot of useless files and images and code I removed almost all of it, and about using images and videos it's better to put them all in a structured folder in the public direcroty and call them using a dyamic url call from the public the system will work on whatever the app url is:

the folder contains the png images is located in public/assets/png

for example if I had to include an image called example.png I would do it this way:

<img src="/assets/png/example.png" alt="" />

Also talking about images and icons, I found that you guys store the icons component of every object if needed within the object itself in the js datafile, and since I converted the js files to json files we are no longer be able to store those components directly, so I wrote a little bit of code to make that available but by storing the name of the icon component, isn't that powserfull hh whatever, for example:

before we were storing the icons like this :

import { GiGraduateCap } from 'react-icons/gi'

export const topics = [
  {
    id: 0,
    title: "Developer's Library",
    description: "Resources for learning HTML, CSS, JavaScript, React, Angular, Typescript.... you name it. It's all here, or coming with your help!",
    point1: "A place for developers to learn and grow",
    point2: "Share your knowledge, or learn from others",
    point3: "Be a part of a community and build up that resume",
    link: "/DevelopersLibrary",
    icon: GiGraduateCap
  },
  ...

but now we just store names:

[
  {
    "id": 1,
    "title": "Developers Library",
    "description": "Resources for learning HTML, CSS, JavaScript, React, Angular, Typescript.... you name it. It's all here, or coming with your help!",
    "points": [
      "A place for developers to learn and grow",
      "Share your knowledge, or learn from others",
      "Be a part of a community and build up that resume"
    ],
    "icon": "GiGraduateCap",
  },
...

and the magic happens here:

//components/LearningResources/index.js
const ResourceCard = memo(({ id, title, icon }) => {
  // get the library that the icon belongs to in the react-icons package from the name of the icon.
  const lib = icon
    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
    .split(" ")[0]
    .toLocaleLowerCase();
  // auto import the react-icons component based on its name in the icon prop.
  const Icon = loadable(() => import(`react-icons/${lib}/index.js`), {
    resolveComponent: (element) => element[icon],
  });
  return (
    <a href={`/resource/${id}`} className="flex justify-center items-center">
      <div className="p-2 m-4 rounded-lg z-1 bg-gradient-to-r from-accent to-accent2 shadow-l">
        <div className="flex p-6 text-center transition-all duration-1000 bg-white rounded-lg dark:bg-blue hover:scale-95 hover:shadow-sm group">
          <Icon
            color="#999"
            className="w-12 h-12 transition duration-1000 ease-in-out fill-current delay-50 hover:text-blue-700 hover:fill-current group-hover:scale-110"
          />
...

[monsefot]

These are later tasks to do:

• [ ] build theme context instead of js script in the public directory

[socket-security[bot]]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
@loadable/component	5.15.3	None	+0	94.8 kB	kashey

[monsefot]

I found a lot of repeated code that could've been put in a template for example the leetcode , codeforces, hackerrank pages, those pages are the same template and it is just the data which changes here, so I built a template for them, also I put all the solutions of the coding problems in one datafile simply because they all have the same object structure, we could later change the id of solution to match the id of its problem whether the id is in the leetcode data file or other datafile.

Also I renamed almost all the pages and comonents to have an understandable names for the developers, because I had a hard time to understand every piece of component.

[monsefot]

I hope you like my work and I actually like this project, it is a great if you successed building it @mathcodes

[mathcodes]

@MONSEFOT - This is a LOT of really great work 🔥

The only reason I'm not merging it is the links aren't working, or bringing me to the templates you created:

What do you think about breaking this up into smaller PRs that build into your idea here. I love what you're doing and really appreciate your time and contributions.

Let me know how you'd like to proceed to implement these changes.

[monsefot]

@MONSEFOT - This is a LOT of really great work 🔥

The only reason I'm not merging it is the links aren't working, or bringing me to the templates you created:

What do you think about breaking this up into smaller PRs that build into your idea here. I love what you're doing and really appreciate your time and contributions.

Let me know how you'd like to proceed to implement these changes.

@MONSEFOT - This is a LOT of really great work 🔥

The only reason I'm not merging it is the links aren't working, or bringing me to the templates you created:

What do you think about breaking this up into smaller PRs that build into your idea here. I love what you're doing and really appreciate your time and contributions.

Let me know how you'd like to proceed to implement these changes.

I 'll try to fix the problem of links, also I just made a change to clean the unnescessery code and I improved it to be flexible for change with a good architecture, the work starts after this change, using auto generated pages based on data keeps the site working and not craching when you decided to change to a database.

And I am ok with the idea of beaking the work into smaller PRs that waht I would do actually