Forem: Aydın Akyol

10 High-Quality Free Resources That Will Make Every Web Developer's Life Easier

Aydın Akyol — Mon, 02 May 2022 07:00:39 +0000

There are so many ways to make web development more efficient, and I found some amazing resources that will help you save time⌛

Table of Contents

Lorem Ipsum and Lorem Picsum
Squoosh
JSON Formatter
Supabase
Tailwind
Ant Design
Material-UI
auth0
cerbos
Refine

1. Lorem Ipsum and Lorem Picsum

Lorem Ipsum is defined as a block of imitation writing.

If you need dummy photos for your content, Lorem Picsum is the place for you.

2. Squoosh

Squoosh compressing your images will almost unnoticeable quality loss, and you can edit their size or how much is lost making it a must if optimizing the image for web use.

3. JSON Formatter

JSON Formatter and JSON Validator help to format and validate your JSON text. It also provides a tree view that helps to navigate your formatted JSON data.

We create our dummy content. Now, How do we store them? Let's keep reading 👇

4. Supabase

Create a backend with Supabase in less than 2 minutes. Start your project with a Postgres Database, Authentication, instant APIs, Realtime subscriptions and Storage.

Now it's time to show our amazing content on the website 🎉

5. Tailwind

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

6. Ant Design

Ant Design is a design system for enterprise-level products. Create an efficient and enjoyable work experience.

7. Material UI

Material UI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

8. auth0

The Auth0 identity platform provides a secure, streamlined way to manage your users with ease.

9. Cerbos

Cerbos provides complete authorization for your product while enabling collaborative management of permissions.

Before the last item

In fact, I've included most of the resources we'll need when building a website. There may be my shortcomings, things I forgot, or there may be better ones, you can specify them in the comments, I would be very happy, I can write a follow-up article with them 😇

But apart from all these, there is one last item that I want to talk to you about. You wrote a title saying it will make our life easier, but you may say how adding all these to a project will make our life easier. At this point, we come across "refine" 💪

10. refine

refine is a React-based framework for rapid building of internal tools. It's is a a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.

If you're looking for a framework that will let your data- intensive application run at top speeds with extreme customizability, then look no further than refine. This React based headless system has been designed specifically for speed - allowing users to bring their own UI and update it via refine's powerful interface!

Key features

🔥 Headless : So you can bring your own UI and fuel it with Refine for top speed development.

⚙️ Zero-configuration : One-line setup with superplate. It takes less than a minute to start a project.

📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.

🔌 Backend Agnostic : Connects to any custom backend. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase and Altogic.

📝 Native Typescript Core : You can always opt out for plain JavaScript.

🐜 Enterprise UI : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

👩‍💻 🧑‍💻 Thank you very much for reading and taking the time, I hope my article was helpful.

See you in the next articles. 🙋‍♂️

Top React JS Frameworks Every Developer Should Know

Aydın Akyol — Mon, 21 Feb 2022 08:19:45 +0000

Best UI Frameworks for React.js

In this post, I have listed some of the best React frameworks that are most popular and that I believe will be popular in 2022.

What is React?

React is a JavaScript library that was developed by Facebook. It is one of the most popular libraries for building user interfaces.
React has a number of features that make it an attractive option for developers to use when building their next front-end project. React is very easy to learn and can be used in any type of project. It also has a large community, which means you will always find help when you need it.

React has a number of frameworks that are competing to be the best framework in 2022. It is not easy to create a React project from scratch, but with the help of some libraries and frameworks, it can be done in no time.

Table of Contents

Create React App
Material-UI
Ant Design
React Bootstrap
Refine

1. Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.

Get started in seconds
Whether you’re using React or another library, Create React App lets you focus on code, not build tools.

To create a project called my-app, run this command:

npx create-react-app my-app
cd my-app
npm start

Example

2. Material UI

First up, Material UI is an excellent React UI framework with multiple pre-built components and templates. Material UI is a great framework for building UI components. It has a large community of developers and is very popular.

MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your design system and develop React applications faster.

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Example

Link

3. Ant Design

Looking for a React admin panel framework that is both attractive and easy to use? Look no further than React Ant Design. This library provides everything you need to get started quickly, including components, layout templates, and powerful routing capabilities. Best of all, it conforms to the popular Ant Design style guide, so your app will look great whether it's running on a desktop or mobile device.

// with npm
npm install antd

// with yarn
yarn add antd

Example

Link

4. React Bootstrap

This UI Kit library provides a React alternative to Bootstrap, giving you more control over the function of each component. With this framework, it's easy for developers who want an online presence without having too much work with coding or design skills! You can find thousands of themes made using these components as well so there will be something in here perfect just what your needs are at any given time.

npm install react-bootstrap bootstrap@5.1.3

Example

Link

5. refine

Key features

🔥 Headless : So you can bring your own UI and fuel it with Refine for top speed development.

⚙️ Zero-configuration : One-line setup with superplate. It takes less than a minute to start a project.

📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.

📝 Native Typescript Core : You can always opt out for plain JavaScript.

🐜 Enterprise UI : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

There are two ways to add UI elements to refine;

Using a UI Library such as Tailwind, Chakra UI, etc.
Using a complete UI Framework such as Ant Design, Material UI, etc.

The recommended way is using the superplate tool. superplate's CLI wizard will let you create and customize your application in seconds. You can find tutorial from here

npx superplate-cli -p refine-react tutorial

Examples

Link

If you enjoyed this article, please hit that little heart button and share with others!
This will help us grow our community so we can all learn more together.

Simple web application example with Refine

Aydın Akyol — Mon, 04 Oct 2021 15:14:47 +0000

Do you want to develop a web application quickly? You are at the right place! I will develop a simple movie web application with refine on the frontend and Supabase on the backend, you should continue reading. I will try to explain it step by step in a very simple way.

1. Refine setup

There are two alternative methods to set up a refine application.

The recommended way is using the superplate tool. superplate's CLI wizard will let you create and customize your application in seconds.

Alternatively, you may use the create-react-app tool to create an empty React application and then add refine module via npm.

I will use superplate-cli and select a Supabase. You can customize other options as you wish.

2. Create admin panel with refine

We should add our Supabase url and key in supabaseClient.tsx
Add custom login page in App.tsx

App.tsx



import { Refine } from "@pankod/refine";

import "@pankod/refine/dist/styles.min.css";
import { dataProvider } from "@pankod/refine-supabase";

import authProvider from "./authProvider";
import { supabaseClient } from "utility";
import { Login } from "./pages/login";

function App() {
  return (
    <Refine
      dataProvider={dataProvider(supabaseClient)}
      authProvider={authProvider}
      LoginPage={Login}
    ></Refine>
  );
}

export default App;

Login page




import React from "react";
import {
  Row,
  Col,
  AntdLayout,
  Card,
  Typography,
  Form,
  Input,
  Button,
  Checkbox,
} from "@pankod/refine";
import "./styles.css";

import { useLogin } from "@pankod/refine";

const { Text, Title } = Typography;

export interface ILoginForm {
  username: string;
  password: string;
  remember: boolean;
}

export const Login: React.FC = () => {
  const [form] = Form.useForm<ILoginForm>();

  const { mutate: login } = useLogin<ILoginForm>();

  const CardTitle = (
    <Title level={3} className="title">
      Sign in your account
    </Title>
  );

  return (
    <AntdLayout className="layout">
      <Row
        justify="center"
        align="middle"
        style={{
          height: "100vh",
        }}
      >
        <Col xs={22}>
          <div className="container">
            <div className="imageContainer">
              <img src="./refine.svg" alt="Refine Logo" />
            </div>
            <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
              <Form<ILoginForm>
                layout="vertical"
                form={form}
                onFinish={(values) => {
                  login(values);
                }}
                requiredMark={false}
                initialValues={{
                  remember: false,
                  email: "info+refineflix@refine.dev",
                  password: "refineflix",
                }}
              >
                <Form.Item
                  name="email"
                  label="Email"
                  rules={[{ required: true, type: "email" }]}
                >
                  <Input size="large" placeholder="Email" />
                </Form.Item>
                <Form.Item
                  name="password"
                  label="Password"
                  rules={[{ required: true }]}
                  style={{ marginBottom: "12px" }}
                >
                  <Input type="password" placeholder="●●●●●●●●" size="large" />
                </Form.Item>
                <div style={{ marginBottom: "12px" }}>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox
                      style={{
                        fontSize: "12px",
                      }}
                    >
                      Remember me
                    </Checkbox>
                  </Form.Item>

                  <a
                    style={{
                      float: "right",
                      fontSize: "12px",
                    }}
                    href="#"
                  >
                    Forgot password?
                  </a>
                </div>
                <Button type="primary" size="large" htmlType="submit" block>
                  Sign in
                </Button>
              </Form>
              <div style={{ marginTop: 8 }}>
                <Text style={{ fontSize: 12 }}>
                  Don’t have an account?{" "}
                  <a href="#" style={{ fontWeight: "bold" }}>
                    Sign up
                  </a>
                </Text>
              </div>
            </Card>
          </div>
        </Col>
      </Row>
    </AntdLayout>
  );
};



.layout {
    background: radial-gradient(50% 50% at 50% 50%, #63386a 0%, #310438 100%);
    background-size: "cover";
  }

  .container {
    max-width: 408px;
    margin: auto;
  }

  .title {
    text-align: center;
    color: #626262;
    font-size: 30px;
    letter-spacing: -0.04em;
  }

  .imageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

You can use default user for login.

Create movies list page with add a resource in App.tsx



import { Refine, Resource } from "@pankod/refine";

import "@pankod/refine/dist/styles.min.css";
import { dataProvider } from "@pankod/refine-supabase";

import authProvider from "./authProvider";
import { supabaseClient } from "utility";

import {
  AdminMovieList,
} from "./pages/admin/movies";
import { Login } from "./pages/login";

function App() {
  return (
    <Refine
      dataProvider={dataProvider(supabaseClient)}
      authProvider={authProvider}
      LoginPage={Login}

    >
      <Resource
        name="movies"
        list={AdminMovieList}
        options={{
          route: "admin/movies",
        }}
      />
    </Refine>
  );
}

export default App;

AdminMovieList page ```tsx

import {
List,
Table,
useTable,
IResourceComponentsProps,
Space,
EditButton,
ShowButton,
getDefaultSortOrder,
CreateButton,
DeleteButton,
} from "@pankod/refine";

import { IMovies } from "interfaces";

export const AdminMovieList: React.FC = () => {
const { tableProps, sorter } = useTable({
initialSorter: [
{
field: "id",
order: "asc",
},
],
});

return (
}}>

key="id"
dataIndex="id"
title="ID"
sorter
defaultSortOrder={getDefaultSortOrder("id", sorter)}
/>

    <Table.Column<IMovies>
      title="Actions"
      dataIndex="actions"
      render={(_, record) => (
        <Space>
          <EditButton hideText size="small" recordItemId={record.id} />
          <ShowButton hideText size="small" recordItemId={record.id} />
          <DeleteButton hideText size="small" recordItemId={record.id} />
        </Space>
      )}
    />
  </Table>
</List>

);
};


* Movies interface
```tsx


export interface IMovies {
  id: string;
  name: string;
  description: string;
  preload: string;
  director: string;
  stars: string;
  premiere: string;
  trailer: string;
  images: IFile[];
}

Now we will add create page



      <Resource
        name="movies"
        list={AdminMovieList}
        create={AdminMovieCreate}
        options={{
          route: "admin/movies",
        }}
      />



import {
  Create,
  Form,
  Input,
  IResourceComponentsProps,
  Upload,
  useForm,
  RcFile,
} from "@pankod/refine";
import { IMovies } from "interfaces";
import { supabaseClient, normalizeFile } from "utility";

export const AdminMovieCreate: React.FC<IResourceComponentsProps> = () => {
  const { formProps, saveButtonProps } = useForm<IMovies>();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Name"
          name="name"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="Premiere" name="premiere">
          <Input />
        </Form.Item>
        <Form.Item label="Description" name="description">
          <Input />
        </Form.Item>
        <Form.Item label="Director" name="director">
          <Input />
        </Form.Item>
        <Form.Item label="Stars" name="stars">
          <Input />
        </Form.Item>

        <Form.Item label="Images">
          <Form.Item
            name="images"
            valuePropName="fileList"
            normalize={normalizeFile}
            noStyle
          >
            <Upload.Dragger
              name="file"
              listType="picture"
              multiple
              customRequest={async ({ file, onError, onSuccess }) => {
                try {
                  const rcFile = file as RcFile;

                  await supabaseClient.storage
                    .from("refineflix")
                    .upload(`public/${rcFile.name}`, file, {
                      cacheControl: "3600",
                      upsert: true,
                    });

                  const { data } = supabaseClient.storage
                    .from("refineflix")
                    .getPublicUrl(`public/${rcFile.name}`);

                  const xhr = new XMLHttpRequest();
                  onSuccess && onSuccess({ url: data?.publicURL }, xhr);
                } catch (error) {
                  onError && onError(new Error("Upload Error"));
                }
              }}
            >
              <p className="ant-upload-text">Drag & drop a file in this area</p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Create>
  );
};

normalize file in utility folder



import { UploadFile } from "@pankod/refine";

interface UploadResponse {
    url: string;
}
interface EventArgs<T = UploadResponse> {
    file: UploadFile<T>;
    fileList: Array<UploadFile<T>>;
}

export const normalizeFile = (event: EventArgs) => {
    const { fileList } = event;

    return fileList.map((item) => {
        const { uid, name, type, size, response, percent, status } = item;

        return {
            uid,
            name,
            url: item.url || response?.url,
            type,
            size,
            percent,
            status,
        };
    });
};

Edit page



import React from "react";
import {
  Edit,
  Form,
  Input,
  IResourceComponentsProps,
  RcFile,
  Upload,
  useForm,
} from "@pankod/refine";

import { IMovies } from "interfaces";
import { supabaseClient, normalizeFile } from "utility";

export const AdminMovieEdit: React.FC<IResourceComponentsProps> = () => {
  const { formProps, saveButtonProps } = useForm<IMovies>();

  return (
    <Edit saveButtonProps={saveButtonProps} pageHeaderProps={{ extra: null }}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Name"
          name="name"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="Premiere" name="premiere">
          <Input />
        </Form.Item>
        <Form.Item label="Description" name="description">
          <Input />
        </Form.Item>
        <Form.Item label="Director" name="director">
          <Input />
        </Form.Item>
        <Form.Item label="Stars" name="stars">
          <Input />
        </Form.Item>
        <Form.Item label="Trailer" name="trailer">
          <Input />
        </Form.Item>
        <Form.Item label="Images">
          <Form.Item
            name="images"
            valuePropName="fileList"
            normalize={normalizeFile}
            noStyle
          >
            <Upload.Dragger
              name="file"
              listType="picture"
              multiple
              customRequest={async ({ file, onError, onSuccess }) => {
                try {
                  const rcFile = file as RcFile;

                  await supabaseClient.storage
                    .from("refineflix")
                    .upload(`public/${rcFile.name}`, file, {
                      cacheControl: "3600",
                      upsert: true,
                    });

                  const { data } = supabaseClient.storage
                    .from("refineflix")
                    .getPublicUrl(`public/${rcFile.name}`);

                  const xhr = new XMLHttpRequest();
                  onSuccess && onSuccess({ url: data?.publicURL }, xhr);
                } catch (error) {
                  onError && onError(new Error("Upload Error"));
                }
              }}
            >
              <p className="ant-upload-text">Drag & drop a file in this area</p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
      </Form>
    </Edit>
  );
};

Show page



import {
  useShow,
  Show,
  Typography,
  IResourceComponentsProps,
  Space,
  ImageField,
  RefreshButton,
  EditButton,
  useNavigation,
} from "@pankod/refine";

import { IMovies } from "interfaces";

const { Title, Text } = Typography;

export const AdminMovieShow: React.FC<IResourceComponentsProps> = () => {
  const { queryResult } = useShow<IMovies>();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  const { push } = useNavigation();

  return (
    <Show
      isLoading={isLoading}
      pageHeaderProps={{
        title: record?.name,
        subTitle: record?.premiere,
        extra: (
          <>
            <EditButton
              onClick={() => push(`/admin/movies/edit/${record?.id}`)}
            />
            <RefreshButton />
          </>
        ),
      }}
    >
      <Title level={5}>Director</Title>
      <Text>{record?.director || "-"}</Text>

      <Title level={5}>Stars</Title>
      <Text>{record?.stars || "-"}</Text>

      <Title level={5}>Trailer</Title>
      {record?.trailer && (
        <video width="400" controls>
          <source src={record.trailer} type="video/mp4" />
        </video>
      )}

      <Title level={5}>Images</Title>
      <Space wrap>
        {record?.images ? (
          record.images.map((img) => (
            <ImageField
              key={img.name}
              value={img.url}
              title={img.name}
              width={200}
            />
          ))
        ) : (
          <Text>Not found any images</Text>
        )}
      </Space>
    </Show>
  );
};

Final version of our <Resource>.



      <Resource
        name="movies"
        list={AdminMovieList}
        create={AdminMovieCreate}
        show={AdminMovieShow}
        edit={AdminMovieEdit}
        options={{
          route: "admin/movies",
        }}
      />

3. Create list page for movies

We will create custom list and show pages for the unauthorized users because of that, we should add custom routes for these pages.

App.tsx



import { Refine, Resource } from "@pankod/refine";

import "@pankod/refine/dist/styles.min.css";
import { dataProvider } from "@pankod/refine-supabase";

import authProvider from "./authProvider";
import { supabaseClient } from "utility";

import {
  AdminMovieList,
  AdminMovieCreate,
  AdminMovieShow,
  AdminMovieEdit,
} from "./pages/admin/movies";
import { MoviesList, MovieShow } from "./pages/movies";
import { Login } from "./pages/login";

function App() {
  return (
    <Refine
      dataProvider={dataProvider(supabaseClient)}
      authProvider={authProvider}
      LoginPage={Login}
      routes={[
        {
          exact: true,
          component: MoviesList,
          path: "/movies",
        },
        {
          exact: true,
          component: MovieShow,
          path: "/:resource(movies)/:action(show)/:id",
        },
      ]}
    >
      <Resource
        name="movies"
        list={AdminMovieList}
        create={AdminMovieCreate}
        show={AdminMovieShow}
        edit={AdminMovieEdit}
        options={{
          route: "admin/movies",
        }}
      />
    </Refine>
  );
}

export default App;

Movies list page



import {
  IResourceComponentsProps,
  Card,
  Space,
  useList,
  useNavigation,
} from "@pankod/refine";
import { Layout } from "components";

import { IMovies } from "interfaces";

export const MoviesList: React.FC<IResourceComponentsProps> = () => {
  const { Meta } = Card;

  const { data, isLoading } = useList<IMovies>({
    resource: "movies",
    queryOptions: {
      staleTime: 0,
    },
  });

  const { push } = useNavigation();

  const renderMovies = () => {
    if (data) {
      return data.data.map((movie) => {
        return (
          <Card
            hoverable
            key={movie.name}
            style={{ width: 240, minHeight: 400 }}
            cover={
              movie.images?.length > 0 ? (
                <img alt={movie.images[0].name} src={movie.images[0].url} />
              ) : (
                <img
                  alt="default"
                  src="https://cdn.pixabay.com/photo/2019/04/24/21/55/cinema-4153289_960_720.jpg"
                />
              )
            }
            loading={isLoading}
            onClick={() => push(`/movies/show/${movie.id}`)}
          >
            <Meta title={movie.name} description={movie.description} />
          </Card>
        );
      });
    }
  };

  return (
    <Layout>
      <Space align="start">{renderMovies()}</Space>
    </Layout>
  );
};

Movies detail page



import {
  useShow,
  Show,
  Typography,
  IResourceComponentsProps,
  Space,
  ImageField,
} from "@pankod/refine";
import { Layout } from "components";

import { IMovies } from "interfaces";

const { Title, Text } = Typography;

export const MovieShow: React.FC<IResourceComponentsProps> = () => {
  const { queryResult } = useShow<IMovies>();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  const renderDetail = () => (
    <>
      <Title level={5}>Director</Title>
      <Text>{record?.director || "-"}</Text>

      <Title level={5}>Stars</Title>
      <Text>{record?.stars || "-"}</Text>
      <Title level={5}>Trailer</Title>
      {record?.trailer && (
        <video width="400" controls>
          <source src={record.trailer} type="video/mp4" />
        </video>
      )}
      <Title level={5}>Images</Title>
      <Space wrap>
        {record?.images ? (
          record.images.map((img) => (
            <ImageField
              key={img.name}
              value={img.url}
              title={img.name}
              width={200}
            />
          ))
        ) : (
          <Text>Not found any images</Text>
        )}
      </Space>
    </>
  );

  return (
    <Layout>
      <Show
        isLoading={isLoading}
        pageHeaderProps={{
          title: record?.name,
          subTitle: record?.premiere,
          extra: null,
        }}
      >
        {renderDetail()}
      </Show>
    </Layout>
  );
};

here is repo