React & Moralis: next parts? And Github version

Hi @Erno,

Great serie of React & Moralis code examples!
See: React & Moralis Programming

In the first video it is presented to build a twitter clone app, but only the Authentication and Save user data is covered in the parts 1 … 3.

Are the other points still scheduled in new videos or where to find the other parts of the serie?

Best regards,
Cas

Here a navigation improvement: adding a menu to the Avatar with the options to open the Profile page and Logout: whole App.js…

import { Container, Heading, Flex, Spacer, Avatar, Box, Menu, MenuButton, MenuList, MenuItem, span } from "@chakra-ui/react";
import { ByMoralis, useMoralis } from "react-moralis";
import { Auth } from './Auth';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import { Home } from './Home';
import { Profile } from './Profile';

function App() {
  const { isAuthenticated, logout, user, isAuthUndefined } = useMoralis();

  return (
    <Container>
      <Flex my={3}>
        <Link to="/"><Heading>Home</Heading></Link>
        <Spacer />
        {isAuthenticated && <Menu>
          <MenuButton as={span} ><Avatar name={user.attributes.username} /></MenuButton>
          <MenuList>
            <MenuItem minH="32px"><Link to="/profile"><span>My profile</span></Link></MenuItem>
            <MenuItem minH="32px" onClick={() => logout()}>Logout</MenuItem>
          </MenuList>
        </Menu>}
      </Flex>
      <hr />

      <Heading my={3}>Welcome to the Twitter clone, {user ? user.attributes.username : ' authenticate please..'}</Heading>
      {isAuthenticated ? <Switch>
        <Route path="/" exact><Home /></Route>
        <Route path="/profile" exact><Profile /></Route>
      </Switch> : <>
        {!isAuthUndefined && <Redirect to="/" />}
        <Auth />
      </>}
      <Box mt={6}><ByMoralis width={150} variant="colour" /></Box>
    </Container>
  );
}

export default App;

ByMoralis: see docu -> search “ByMoralis” for options.

To add an icon (to a menuitem): see Chakra-ui icons

Hi, it is correct that only the first videos are recorded. I am currently more focused on building new features for Moralis. So, unfortunately, I don’t have time now to record the rest of the videos.

The react-moralis documentation is quite extensive, and I hope it will help you. Otherwise, please ask any issues or questions on this forum, and I’m glad to help.

1 Like

Hi Erno,

I fully understand :wink:

But is it possible to post the resulting app code?
It is great to learn from examples :slight_smile:

Hi, sorry the code was mostly developed during recording, so there is no real finished app.

Understandable :wink: and good choice to improve Moralis and its docu first :slight_smile:

You gave basics, and docu is of great help !
So, no problem to find out.

Success with Moralis, great job!

1 Like

I have created an Empty React&Moralis app, inspired on this code at github.