Skip to content

Commit 8765fa1

Browse files
codercatdevcodercatdev
committed
Merge branch 'dev'
2 parents 91a2e3e + 54b9a01 commit 8765fa1

File tree

3 files changed

+185
-0
lines changed
  • apps/codingcatdev/src/routes/(content-single)/(non-course)

3 files changed

+185
-0
lines changed

Diff for: ‎apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/batuhan-ozdemir/+page.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
type: guest
3+
cover: 'https://media.codingcat.dev/image/upload/v1703262262/main-codingcatdev-photo/podcast-guest/16444991.jpg'
4+
name: Batuhan Ozdemir
5+
published: published
6+
slug: batuhan-ozdemir
7+
start: January 1, 2000
8+
socials:
9+
github: 'https://github.com/BatuhanW'
10+
twitter: 'https://twitter.com/kakamelatte'
11+
websites:
12+
- https://batuhan.dev/
13+
---
14+
15+
## About
16+
17+
Tech Lead @refinedev.

Diff for: ‎apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1_refine/+page.md

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
type: podcast
3+
authors:
4+
- alex-patterson
5+
episode:
6+
recording_date: 'February 21, 2024 12:00 PM'
7+
season: 1
8+
published: published
9+
podcast: code-with-coding-cat
10+
chapters_done: false
11+
cloudinary_convert: false
12+
cover: >-
13+
https://media.codingcat.dev/image/upload/v1703262044/main-codingcatdev-photo/2024-2-21_refine.png
14+
devto: null
15+
excerpt: >-
16+
Build Internal Tools and Web Apps with Blazing Speed.
17+
guests:
18+
- batuhan-ozdemir
19+
hashnode:
20+
picks: null
21+
slug: cwcc-1_refine
22+
sponsors:
23+
- refine
24+
spotify: null
25+
start: 'Feb 21, 2024'
26+
title: 'Open-source Retool for Enterprise Building React Internal Tool'
27+
youtube: 'https://www.youtube.com/watch?v=gQt2km2ZtSw'
28+
---
29+
30+
# Open-source Retool for Enterprise: Unleashing React's Potential for Data-Intensive Applications
31+
32+
Welcome back, Perfect Peeps! We're embarking on another coding adventure with our fuzzy feline friend, Coding Cat. Today's focus: Refine - an open-source framework supercharging React apps tailored for the enterprise.
33+
34+
We'll be diving deep into Refine's capabilities from the creator himself, building a real-world application, and unraveling the ice-covered crosses of React development. So grab your warmest sweaters and let's get cracking!
35+
36+
## Enter Refine: A Framework for the Data-Driven Era
37+
38+
Refine, as introduced by Botwan, the tech lead at Refine, is a powerhouse for building data-intensive applications. It's specifically designed to streamline the creation of:
39+
40+
- Internal tools
41+
- Admin panels
42+
- Dashboards
43+
44+
It's an open-source masterpiece honed for the React framework. And it's supported by a community that's growing more robust by the day with:
45+
46+
- 20K GitHub stars
47+
- 15K developers actively using Refine
48+
- Over 10,000 Refine-based apps already deployed in production
49+
50+
### The Backstory: A VC-backed Y Combinator Alumnus
51+
52+
Refine's backstory is as fascinating as the framework itself. It all started from a direct need within Botwan's team - the need for an improved approach to craft enterprise React apps that could handle escalating complexity with finesse.
53+
54+
And yes, Refine is a **Y Combinator** alumnus, a stamp of approval that speaks volumes in the startup arena. It was this combination of an urgent internal driver, robust VC backing, and a nod from YC that catalyzed Refine's growth beyond its initial iteration.
55+
56+
> "What began as an internal tool has now transformed into a community-shared resource, thriving in the open-source spirit."
57+
58+
## Refine's Headless Philosophy: Mix-and-Match Your UI
59+
60+
One of Refine's boldest moves was to go headless. This decision doesn't imply a ghostly setup - rather, it epitomizes versatility and quality.
61+
62+
Moving away from a one-size-fits-all model, Refine enables developers to blend their preferred UI frameworks - be it Material UI, Ant Design, Tailwind, or anything else - with its robust backend capabilities.
63+
64+
So Refine breaks free of the constraints of low-code platforms that often transform into hassles as complexity mounts. The visionary team behind Refine has experienced the shortcomings of such tools firsthand.
65+
66+
They've built something that fuses low-code speed without compromising long-term flexibility or manageability.
67+
68+
## Getting Hands-On: From Zero to React Hero
69+
70+
Alright, time to get our paws dirty with some real code! Refine is a joy for live coding tutorials, which is exactly why we're gathered here today.
71+
72+
We'll not just talk about Refine but actually build with it - kickstarting a simple app to demonstrate Refine's fluidity for spinning up React solutions.
73+
74+
Let's initialize our Refine journey with their CLI:
75+
76+
## Kickstart your app with Refine's CLI
77+
78+
```bash
79+
npm create refine app
80+
```
81+
82+
It's delightful to see a new app come alive, and Refine's CLI artistry adds a dash of whimsy to the otherwise mundane terminal window.
83+
84+
However, Refine's true magic lies in how effortlessly it handles routing, data flows, and backend integrations - be it GraphQL or REST.
85+
86+
Here's a snippet showing Refine's GraphQL data handling:
87+
88+
```js
89+
// Fetching data with GraphQL in Refine
90+
const { tableProps } = useTable({ resource: 'posts', gqlQuery: postsList });
91+
return <Table {...tableProps} />;
92+
```
93+
94+
With ease, you're now managing data via a polished UI. All thanks to Refine's fluid integration between your UI library and its refined (pun intended) core.
95+
96+
### Authorization in a Snap: Authenticating with Ease
97+
98+
And what about the ever-critical realm of authentication? Not to worry - Refine's got you covered here too with a simplified approach:
99+
100+
```js
101+
// Refine auth setup
102+
// Login handler
103+
function login() {
104+
// Auth logic
105+
return { userId: 'user123' };
106+
}
107+
// Access check
108+
function check() {
109+
// Authorization
110+
return true;
111+
}
112+
```
113+
114+
With barely a dozen lines of code, we've patched authentication into our app! Of course, this omits necessary complexity for real-world security - but it exemplifies the speed at which Refine can incorporate auth.
115+
116+
## The Conclusion: Refine's Versatile Promise
117+
118+
Refine is a postcard from the future of React development - showcasing the open-source community's drive to solve problems and share solutions.
119+
120+
The transcript from our Coding Cat session serves as a testament to how versatility, integration, and simplicity are more than just buzzwords for Refine's developers. They're the cornerstones.
121+
122+
So dive deep into React's capabilities with the confidence that Refine won't let you get lost in tangled webs. As we sign-off from our feline-hosted coding party, remember - Refine stands as an invitation to build, innovate, and openly share solutions in the collaborative spirit of advancement.
123+
124+
Happy coding, Perfect Peeps! May your React apps flourish under Refine's wings.
125+
126+
Explore [Coding Cat](http://codingcat.dev) for more on Refine's magic and other web dev marvels.

Diff for: ‎apps/codingcatdev/src/routes/(content-single)/(non-course)/sponsor/refine/+page.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
type: sponsor
3+
cover: https://media.codingcat.dev/image/upload/v1709759516/main-codingcatdev-photo/sponsors/refine.png
4+
description: 'Refine.dev: Build Internal Tools and Web Apps with Blazing Speed'
5+
end:
6+
name: Refine
7+
published: published
8+
slug: refine
9+
start: Jan 1, 2024
10+
url: 'https://refine.dev?utm=codingcat.dev'
11+
---
12+
13+
If you're a developer who has grown weary of the repetitive grind of building CRUD (Create, Read, Update, Delete) operations, state management, authentication systems, and the like for internal tools and web apps – Refine.dev is about to become your new best friend.
14+
15+
**What is Refine?**
16+
17+
Refine is an open-source React framework designed to streamline the development of internal tools, B2B applications, admin panels, and dashboards. It provides a powerful set of pre-built components and hooks that handle many of the time-consuming, boilerplate tasks that developers face when building these types of applications.
18+
19+
**Key Benefits of Refine**
20+
21+
- **Speed, Speed, Speed:** Refine gets your projects up and running in record time. You focus on core business logic while Refine takes care of the essentials.
22+
- **Flexibility:** Refine doesn't impose a restrictive structure on your apps. You retain full control and customization over your project's look and feel.
23+
- **Built on Rock-Solid Foundations:** Refine leverages established technologies like React, Ant Design, and others for reliability and a strong development foundation.
24+
- **Enterprise-Focus:** Designed with the security and access control needs of larger organizations in mind, making it a great fit for enterprise-grade tools.
25+
26+
**Core Features to Supercharge Your Development**
27+
28+
- **CRUD Operations:** Creating, reading, updating, and deleting data becomes a breeze.
29+
- **Authentication and Authorization:** Secure your applications with user logins and role-based access control (RBAC).
30+
- **Routing:** Navigation flows are handled with ease.
31+
- **State Management:** Refine helps you manage complex application state.
32+
- **Internationalization (i18n):** Deliver your applications to a global audience with built-in translation support.
33+
- **UI Component Libraries:** Seamless integration with Ant Design, Material UI, Mantine, and Chakra UI for pre-styled components.
34+
35+
**Should You Use Refine?**
36+
37+
If your projects typically involve building dashboards, admin panels, or internal tools with significant data management requirements, Refine is absolutely worth trying. It saves you a tremendous amount of development time, allowing you to focus on the unique aspects of your application. It's especially appealing for those who want a balance of speed and customizability within the React ecosystem.
38+
39+
**Explore further:**
40+
41+
- Refine Website: [https://refine.dev/](https://refine.dev/)
42+
- Refine GitHub Repository: [https://github.com/refinedev/refine](https://github.com/refinedev/refine)

0 commit comments

Comments
 (0)