sedubois / relate

[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate

Relate brings together mindfulness communities, teachers and individuals.
Read the article on Medium
_{Made with ❤︎ by Sébastien Dubois}

Deprecation notice

This project is no longer actively developed. However, I (Sébastien Dubois) am pursuing mindfulness and web development at Imagine Clarity. Do get in touch with us if you want to help spread mindfulness with next-generation web technologies.

Stack

Read this for the reasoning behind the technology choices.

• React rendering
• Redux state management
• Redux-thunk for async/conditional state changes
• GraphQL API query language
• Apollo GraphQL client
• Graphcool GraphQL/lambda backend-as-a-service
• Next.js universal webapp framework (server-side rendering, single-page experience)
• Next-Routes to manage dynamic routing configuration
• Now deployment
• Auth0 user authentication
• lru-cache for server-side caching of HTML pages
• React-ga for Google Analytics
• React-intl for internationalization
• accept-language for detection of browser's language preference
• MailChimp newsletter registration

Development:

• Webpack-bundle-analyzer to visualize the bundled code contents

Development

• git clone https://github.com/relatenow/relate && cd relate
• yarn
• yarn dev
• navigate to http://localhost:3000
• do something amazing 🎉

NB: yarn will create config.js and server/config.js for you (through the postinstall hook). Edit these files to configure integrations such as GraphQL and analytics.

Credit

See the LICENSE file for license rights and limitations (GPLv3).

Copyright (c) 2016-2017 Sébastien Dubois https://sdubois.now.sh.

relate's Issues

NPM Dependency

Hey Sébastien,

After some contributions on the ran project I decided to follow my own idealistic path to a npm dependency library for next.js. Ran is an awesome project but I feel like going faster to this npm goal, as I would like to use that asap in my future projects. Please feel free to contribute next.js-library, I'm currently at a very eeearly stage (not much to see yet).

Cheers!

Experience from building this project

Hello,

If you don't mind could you please share some things you have learned when building this project? What would you have done differently if given the chance? Are there any next+apollo limitiations? Or just some general advice.

I am thinking about rewriting my somewhat large react application into next+apollo stack so any advice/sources are greatly appreciated.

Some UI/UX library ideas

Which one has a good community, is actively developed, and compatible with the relate stack (next.js etc)?

https://ant.design/
https://onsen.io/react
https://github.com/tachyons-css/tachyons
http://react.semantic-ui.com/
https://github.com/reactstrap/reactstrap
http://getuikit.com/

Material Design:
http://www.material-ui.com
https://github.com/mlaursen/react-md
https://www.muicss.com

isNextPath error thrown inside session.js

I'm having a weird issue with next-routes. session.js is throwing an error on line 21, a method named isNextPath.

My console's giving me: "TypeError: routes.isNextPath is not a function".

Commenting out the if statement it's wrapped in eliminates the error but it appears to be setting up the initial session so I'm guessing that's a bad idea. I'm not sure how to debug this since it's throwing an error due to a next.js package.

Any pointers you can suggest are much appreciated.

GraphCool datashape

Hi,

Can you please add data models detail you use on graphcool console?

Thanks,
Jakk

Authentication

• fix initialisation
• display link to login page in header
• finish login flow
• logout flow
• try server-side auth flow

use new Next 2 features

• dynamic routes with nice URLs
• singleton router API if needed
• get inspiration from other examples
• loading indicator https://github.com/zeit/next.js/tree/master/examples/with-loading
• prefetch API - EDIT blocked by vercel/next.js#740

[Question] Checking for SSR in WithIntl HOC

@sedubois

I'm looking at how you are implementing react-intl with next and have a question about serverRendered in the WithIntl HOC. Is this being set by next somewhere? I have been looking through the source code trying to figure out where this value would be getting set from true on the initial render to false there after.

It's my understanding that it is _document that is loaded from the server-side and that the view from pages/index.js would be returned from <Main /> which is returned from <Document />. I'm just not following where this boolean is being set by next.

Thanks for your help and explanation! 😃