How to Build a Google Docs Clone with React, Material UI, & Firebase

How to Build a Google Docs Clone with React, Material UI, & Firebase

www.freecodecamp.org freecodecamp.org3 months ago in #Dev Love61

In this text, we’ll construct a Google Docs clone the usage of React, Material UI, and Firebase. The ultimate app will appear to be this: If we click on any record, it is going to open up and we will be able to edit them alternatively we’d like to. And essentially the most superb function is that we will be able to edit a record in actual time. This signifies that if two persons are running at the identical record, their development can be mirrored in each cases. But earlier than we commence, be sure to have Node put in for your gadget. If no longer, cross to https://nodejs.org/en/obtain/ to obtain and set up it. Basic Project Setup Let’s first create a React app the usage of the under command: npx create-react-app google-docs-clone This will set up all of the programs and dependencies into a native folder. Then, merely navigate into the venture folder and run npm get started to run the app. We will see most of these code right here that we’d like to take away. We will get started with a clean canvas. Next create a folder referred to as parts. Inside that folder, let’s create a document referred to as doctors.js. Make this part a useful part, like this: import React from ‘react’ export default serve as Docs() { go back ( doctors ) } Now, import this document into the primary App.js document. import ‘./App.css’; import Docs from ‘./parts/doctors’; serve as App() { go back ( ); } export default App; And we’ll see this output at the display screen: Google doctors clone appearing output “doctors” in higher left nook Now, let’s make the name seem within the middle. So in doctors.js, give the primary div a className of docs-main. import React from ‘react’ export default serve as Docs() { go back ( Docs Clone ) } And in App.css document, upload the next types: .docs-main{ text-align: middle; } Now our app looks as if this: Google doctors clone with name in middle Now, we’d like a button to upload our paperwork. So, let’s create it with this code: import React from ‘react’ export default serve as Docs() { go back ( Docs Clone Add a Document ) } And the CSS looks as if this: .add-docs{ top: 40px; width: 200px; background-color: #ffc107; border: none; cursor: pointer; } Let’s import some fonts from Google Fonts. Place this on the best of the CSS document: @import url(‘https://fonts.googleapis.com/css2?relations=Poppins&relations=Roboto&show=switch’); @import url(‘https://fonts.googleapis.com/css2?relations=Poppins&relations=Roboto&show=switch’); .docs-main{ text-align: middle; font-family: ‘Roboto’, sans-serif; } .add-docs{ top: 40px; width: 200px; background-color: #ffc107; border: none; cursor: pointer; font-family: ‘Poppins’, sans-serif; } To upload fonts, merely do that within the respective classNames. How to Install Material UI To set up Material UI, merely kind the command under. If you need to learn the documentation, head over to https://mui.com/. npm set up @mui/subject matter @emotion/react @emotion/styled Now, let’s create yet another part for the modal. We’ll use this modal to upload paperwork to the Firebase database.   import * as React from ‘react’; import Box from ‘@mui/subject matter/Box’; import Button from ‘@mui/subject matter/Button’; import Typography from ‘@mui/subject matter/Typography’; import Modal from ‘@mui/subject matter/Modal’; const taste = { place: ‘absolute’, best: ‘50%’, left: ‘50%’, turn into: ‘translate(-50%, -50%)’, width: 400, bgcolor: ‘background.paper’, border: ‘2px forged #000’, boxShadow: 24, p: 4, }; export default serve as Modal() { const [open, setOpen] = React.useState(false); const handleOpen = () =setOpen(true); const handleClose = () =setOpen(false); go back ( Text in a modal Duis mollis, est non commodo luctus, nisi erat porttitor ligula. ); } This is a easy modal part from Material…

Like to keep reading?

This article first appeared on freecodecamp.org. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply