anu-prakash-dev/template-meteor-react

Meteor 1.3 + React + React-Router Template App

Meteor-React template App

Work In Progress!! (advices, questions or contributions are very welcome!)

Hosted Demo

---

Reason to be

Provide a template app

• react-router with page transitions (css)
• livequery+ddp for data real-time (waiting for Apollo)
• custom Accounts services (login etc..)
• high order components, scalable, re-usable
• shared, clean & safe methods.
• UI components (material-ui and more)
• A "clean" presentation, with Material-UI, but easily changeable

Inspired by Mantra, an architecture, breaking with the universal concept of meteor, for future-proof apps, with a high-maintainability (here.

Tech

Meteor, ES6, npm, react, react-router

Comming soon : Apollo for data abstraction, using graphQL (reactive data with mongodb, rest or sql)

It starts from

this repo: AnnotatedJS/meteor-react-start-app (Thanks to [Mr Post])(https://github.com/AnnotatedJS)!

---

Mini-Doc

• Usage

---

Features

• [email protected], [email protected], [email protected], [email protected]

Page Transitions

• react-addons-css-transition-group

Page Contents

• PageAccount
  • Account: login, createAccount, etc..
• PageHome
  • todo
• PageTasks
  • Tasks (add, remove, edit, private/public, state, counter)
• PageShowcase
  • material-ui left drawer (swipable on mobile!)
  • material-ui (ripple buttons, loaders, snackbar, and more comming)
  • Halogen loaders
  • react-motion draggable list (demo)
  • react-motion animated list (demo)

Account

• Features

  • Login / LoginGoogle/ LoginFacebook / Logout
  • CreateAccount / DeleteAccount
  • Avatar
    • avatarDisconnected
    • avatarDefault (first letter of the username)
    • avatar (input->base64->mongodb)
  • ChangeAvatar
  • VerifyEmail
  • ChangePassword
  • ForgotPassword (send email with link)
  • ResetForgotPassword (from the email link)

• Meteor account-ui/account-ui-unstyled package deleted.

• loginWithPassword

  • Only using meteor accounts-password api and custom css (app/scss/account.scss)

• Result: logical, re-usable, scalable and small react components, which allow to a custom UX.

• loginWith[Service]

  • Config: meteor add service-configuration
  • Google: meteor add accounts-google
  • Facebook: meteor add accounts-facebook

• Actual implementation:

in PageAccount.jsx & PageResetForgotPassword.jsx:

<PageAccount/>
  <Account/>

    if(!logged)
      <AccountNotLogged/>
      -  <Login/>
      -  <LoginGoogle/>
      -  <LoginFacebook/>
      -  <ForgotPassword/>
      -  <CreateAccount/>

    if(logged)
      <AccountLogged/>
      -  <ChangeAvatar/>
           <Avatar/>
      -  <BasicInfo/>
      -  <Logout/>
      -  <ChangePassword/>
      -  <DeleteAccount/>
         if(emailIsNotVerified)
           <VerifyEmail/>


// landing on app after clicking on the email link (triggered by ForgotPassword
<PageResetForgotPassword/>
   <ResetForgotPassword/>

External Services

• Galaxy: app hosting
• mLab: monogdb hosting
• A Domain Name Registrar
• Mailgun: email service

External Api

• Google (for login)
• Facebook (for login)

---

Next Steps

• Find the perfect folder strucutre
• Image upload
• More UI components
• Full doc in the wiki
• Integrate Apollo for data abstraction

---