⚡ Quickstart Guide
Build your first Nodeblocks application in under 10 minutes 🚀
This guide will get you up and running with Nodeblocks frontend components quickly. You'll create a complete application with navigation, authentication, and data management.
⏱️ Time to Complete: 5-10 minutes
💻 What You'll Build: A complete user management application
📋 Prerequisites: Node.js 18+, React knowledge
📋 Prerequisites
System Requirements
- Node.js 18.0+ (Download here)
- npm 8.0+ or yarn 1.22+
- React 18.0+ (we'll set this up)
- Basic TypeScript knowledge (recommended)
🏗️ Project Setup
Create New React Project (if needed)
If you're starting fresh, create a new React project:
# Using Vite (recommended)
npm create vite@latest my-nodeblocks-app -- --template react-ts
cd my-nodeblocks-app
npm install
📦 Installation
# Layout & navigation, authentication, lists & tables
npm install @emotion/react @emotion/styled
npm install @mui/icons-material
npm install @mui/material
npm install @mui/x-date-pickers
npm install @nodeblocks/frontend-navbar-block
npm install @nodeblocks/frontend-footer-block
npm install @nodeblocks/frontend-theme
npm install @nodeblocks/frontend-signin-block
npm install @nodeblocks/frontend-list-users-block
🎯 Build Your First App
Step 1: Create the Application Shell
Replace your src/App.tsx with this complete example:
import React, { useState } from 'react';
import { Box, Button, Stack, Typography } from '@mui/material';
import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { Footer } from '@nodeblocks/frontend-footer-block';
import { ThemeProvider, defaultTheme } from '@nodeblocks/frontend-theme';
import { SignIn } from '@nodeblocks/frontend-signin-block';
import { ListUsers } from '@nodeblocks/frontend-list-users-block';
type Page = 'home' | 'login' | 'users_list';
function App() {
const [currentPage, setCurrentPage] = useState<Page>('home');
const [loggedInUser, setLoggedInUser] = useState<{ name: string } | null>(null);
const [signInData, setSignInData] = useState({ email: '', password: '' });
const renderCurrentPage = () => {
switch (currentPage) {
case 'login':
return (
<Box sx={{ maxWidth: 400, mx: 'auto', my: 4, px: 3, py: 4 }}>
<SignIn
data={signInData}
onDataChange={(nextData) => setSignInData(nextData)}
onSubmit={(event) => {
event.preventDefault();
setLoggedInUser({ name: signInData.email.split('@')[0] || 'User' });
setCurrentPage('users_list');
console.log('Login successful!');
}}
sx={{
backgroundColor: 'white',
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
padding: '2rem',
border: '1px solid lightgray',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
gap: '1rem',
}}
>
<SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
<SignIn.EmailField label="Email" placeholder="Enter your email" />
<SignIn.PasswordField label="Password" placeholder="Enter your password" />
<SignIn.SignInButton>Sign In</SignIn.SignInButton>
</SignIn>
</Box>
);
case 'users_list':
return (
<Box sx={{ p: 4 }}>
<Stack spacing={1.5} sx={{ mb: 3 }}>
<Typography variant="h4">Welcome to your Dashboard!</Typography>
<Typography color="text.secondary">Hello, {loggedInUser?.name || 'User'}!</Typography>
</Stack>
<ListUsers
listUsersTitle="Team Members"
data={[
{
id: '1',
name: 'John Doe',
status: 'active',
createdAt: '2024-01-15',
},
{
id: '2',
name: 'Jane Smith',
status: 'inactive',
createdAt: '2024-01-20',
}
]}
labels={{
emptyStateMessage: 'No users found',
searchFieldPlaceholder: 'Search team members',
headerRow: {
createdAt: 'Joined',
name: 'Name',
status: 'Status',
},
cellData: {
statusActive: 'Active',
statusInactive: 'Inactive',
},
}}
/>
</Box>
);
default:
return (
<Box sx={{ textAlign: 'center', p: 6 }}>
<Typography variant="h4">Welcome to Nodeblocks!</Typography>
<Typography color="text.secondary">Your application is running successfully.</Typography>
</Box>
);
}
};
return (
<ThemeProvider theme={defaultTheme}>
<Box sx={{ minHeight: '100vh', width: '100vw', display: 'flex', flexDirection: 'column' }}>
<Navbar
leftContent={
<Stack direction="row" spacing={1} alignItems="center">
<Box
sx={{
width: 32,
height: 32,
backgroundColor: 'primary.main',
borderRadius: 1,
}}
/>
<Typography variant="h6" sx={{ fontWeight: 700 }}>
MyApp
</Typography>
</Stack>
}
centerContent={
<Button
variant="text"
onClick={(e) => {
e.preventDefault();
setCurrentPage('users_list');
}}
>
Users
</Button>
}
rightContent={
<Box>
{loggedInUser ? (
<Stack direction="row" spacing={1} alignItems="center">
<Typography>Hello, {loggedInUser.name}!</Typography>
<Button
variant="contained"
onClick={() => {
setLoggedInUser(null);
setCurrentPage('login');
}}
>
Logout
</Button>
</Stack>
) : (
<Button
variant="outlined"
onClick={() => setCurrentPage('login')}
>
Sign In
</Button>
)}
</Box>
}
/>
<Box component="main" sx={{ flex: 1, bgcolor: 'background.default' }}>
{renderCurrentPage()}
</Box>
<Footer
logoSrc="/vite.svg"
content={
<Box sx={{ textAlign: 'center', color: 'text.primary' }}>
<Typography>
Built with Nodeblocks - The React Component Library for Business Applications
</Typography>
</Box>
}
copyright="© 2024 Your Company Name. All rights reserved."
sx={{ mt: 'auto' }}
/>
</Box>
</ThemeProvider>
);
}
export default App;
Step 2: Start Your Application
npm run dev
🎉 Congratulations! Your Nodeblocks application is now running. You should see:
- A navigation bar
- Authentication flow (click "Sign In" to test)
- User management dashboard (after login)
- A footer
✅ What You've Built
Your application now includes:
- 🔐 Authentication System - Complete login/logout flow
- 👥 User Management - List and manage team members
- 🧭 Navigation - Navigation with routing
- 📱 Responsive Design - Works on all devices
🚀 Next Steps
Expand Your Application
Add more components to build a complete solution:
# Forms & wizards, lists & tables
npm install @nodeblocks/frontend-create-product-block
npm install @nodeblocks/frontend-list-products-grid-block
npm install @nodeblocks/frontend-create-organization-block
npm install @nodeblocks/frontend-list-organization-block
# Communication
npm install @nodeblocks/frontend-chat-conversation-block
npm install @nodeblocks/frontend-chat-conversation-list-block
Learn More
- 🧩 Browse All Components - Discover 42 available components across nine categories
- 🎨 Advanced Customization - Master block overriding
- ❓ Troubleshooting - Solutions to common issues
💡 Tips
🎯 Start Small
Begin with basic components like Navbar and SignIn. Add complexity gradually as you learn.
🔧 Use TypeScript
All components include full TypeScript support for better development experience.
📚 Read the Docs
Each component has detailed documentation with examples and customization options.
🎉 You're ready to build amazing applications with Nodeblocks!
Need help? Check our ❓ Troubleshooting Guide or contact our support team.