React - MaterialUI - Firebase
A sample employee management system built to simplify the organization of administrative data respective to the end user. Application features authenticated routing based on user roles and permissions. Built with React.js, MaterialUI for the user interface, Firebase for user authentication, Firestore to persist data in a noSql database, and Netlify for hosting.
Deployed using Netlify
Inspiration came from this repo ( Found it just searching Github for relevant concept. ) --> fenil29/employee-management-system-frontend-react
Update all forms to reflect dataa required in tablesDeploy a live siteSet up cd/ci- update styling
lock auth so only the 3 profiles can access (Admin, HR, Employee)
- Allow for new users to be created. Build welcome screen with mock welcome wizard/flow.
Update landing page to SignInSide landing pageHide navbar on landing page, and show on rest of site---> SOLVED reference: https://docs.divjoy.com/Hide-Navbar-and-Footer-on-some-pages-4b6697d1b70a410884f5b42a7b1ecb20- Update all forms to include enchanced UI by featuring MUI custom pickers etc..
Install dependencies
npm install
Update your .env
file with values for each environment variable
API_KEY=AIzaSyBkkFF0XhNZeWuDmOfEhsgdfX1VBG7WTas
etc ...
Install the Netlify CLI
npm install netlify-cli -g
Run the development server
netlify dev
When the above command completes you'll be able to view your website at http://localhost:8888
Note: You can run just the front-end with npm run start
, but netlify dev
also handles running your API endpoints (located in the /api
directory).
This project uses the following libraries and services:
- Framework - Create React App with React Router
- UI Kit - Material UI
- Authentication - Firebase Auth
- Database - Cloud Firestore
- Payments - Stripe
- Analytics - Google Analytics
- Hosting - Netlify
Routing
This project uses React Router and includes a convenient useRouter
hook (located in src/util/router.js
) that wraps React Router and gives all the route methods and data you need.
import { Link, useRouter } from './../util/router.js';
function MyComponent(){
// Get the router object
const router = useRouter();
// Get value from query string (?postId=123) or route param (/:postId)
console.log(router.query.postId);
// Get current pathname
console.log(router.pathname)
// Navigate with the <Link> component or with router.push()
return (
<div>
<Link to="/about">About</Link>
<button onClick={(e) => router.push('/about')}>About</button>
</div>
);
}
Authentication
This project uses Firebase Auth and includes a convenient useAuth
hook (located in src/util/auth.js
) that wraps Firebase and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Firebase functionality.
import { useAuth } from './../util/auth.js';
function MyComponent(){
// Get the auth object in any component
const auth = useAuth();
// Depending on auth state show signin or signout button
// auth.user will either be an object, null when loading, or false if signed out
return (
<div>
{auth.user ? (
<button onClick={(e) => auth.signout()}>Signout</button>
) : (
<button onClick={(e) => auth.signin('[email protected]', 'yolo')}>Signin</button>
)}
</div>
);
}
Database
This project uses Cloud Firestore and includes some data fetching hooks to get you started (located in src/util/db.js
). You'll want to edit that file and add any additional query hooks you need for your project.
import { useAuth } from './../util/auth.js';
import { useItemsByOwner } from './../util/db.js';
import ItemsList from './ItemsList.js';
function ItemsPage(){
const auth = useAuth();
// Fetch items by owner
// Returned status value will be "idle" if we're waiting on
// the uid value or "loading" if the query is executing.
const uid = auth.user ? auth.user.uid : undefined;
const { data: items, status } = useItemsByOwner(uid);
// Once we have items data render ItemsList component
return (
<div>
{(status === "idle" || status === "loading") ? (
<span>One moment please</span>
) : (
<ItemsList data={items}>
)}
</div>
);
}
Deployment
Install the Netlify CLI
npm install netlify-cli -g
Link codebase to a Netlify project (choose the "create and deploy manually" option)
netlify init
Add each variable from your .env
file to your Netlify project (skip ones prepended with "REACT_APP_"). You can also use the Netlify UI for this by going to your Site settings โ Build & Deploy โ Environment.
netlify env:set VARIABLE_NAME value
Build for production
npm run build
Then run this command to deploy to Netlify
netlify deploy
See the Netlify docs for more details.
Other
This project was created using Divjoy, the React codebase generator. You can find more info in the Divjoy Docs.