SKYHUB Front-end using Isomorphic React.js

1 Installation

1. Install Node.js : https://nodejs.org/en/download/

2. gitclone repository https://github.com/ibudisteanu/SkyHub-Frontend-React.js.git . You can also install and clone using Git Desktop

   2.1 or just downloading the zip

3. Open Command Prompt/Terminal and

   1. cd location\clone_repository\

4. npm install

5. Install the missing modules with (optional only in case there are missing modules) you need to install each of them using npm install missing-node-module-name --save

3 Upgrading node.js from 6.x to 8.x (OPTIONAL)

1. install missing modules with npm install missing-node-module-name --save
   1. In case it is required to install react-country-select module, follow step No 2.
2. Run npm rebuild node-sass

Running SkyHub Frontend

1. npm start

It will start on port 8080, and you can access the frontend server by http://127.0.0.1:3000/

Production

1. npm run build -- --release

optional --analyse for

PRODUCTION Optimization

1. Code splitting: kriasoft/react-starter-kit#1295
2. Optimize moment.js https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

Online Versions:

1. myskyhub.ddns.net:8080 for React Frontend
2. myskyhub.ddns.net:4000 for Express Backend with Redis Database

intellij WebStorm

The "src" folder must be set as Resource Root. To do this Settings->Directories where you Set Directories "src" folder as "Resource Root"

TO DOs

Working components

1. Login
2. Register 2.1. Facebook & Google integration, but I need to write the server processing code
3. REST 3.1 Socket.io 3.2 Cookie Authentication JWT (using tokens) 3.2 HTTP requests
4. Header Navigation Menu
5. Server Status Head Bar
6. Forums 7.1 Preview Forum 7.2 View Forum

Install https://www.npmjs.com/package/react-places-autocomplete

To DOs

1. Topics Add Topics Edit Topics Delete Topics
2. Replies Add Replies Edit Replies Delete Replies
3. Voting Add Voting (Up and Downs) Unvote

React Starter Kit — "isomorphic" web app boilerplate  

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

  

Getting Started

• Follow the getting started guide to download and run the project (Node.js >= 6.5)
• Check the code recipes used in this boilerplate, or share yours

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

• feature/redux (PR) — isomorphic Redux by Pavel Lang (see how to integrate Redux) (based on master)
• feature/apollo (PR) — isomorphic Apollo Client by Pavel Lang (see Tracking PR #1147) (based on feature/redux)
• feature/react-intl (PR) — isomorphic Redux and React Intl by Pavel Lang (see how to integrate React Intl) (based on feature/apollo)

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

	React Starter Kit	React Static Boilerplate	ASP.NET Core Starter Kit
App type	Isomorphic (universal)	Single-page application	Single-page application
Frontend
Language	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)
Libraries	React, History, Universal Router	React, History, Redux	React, History, Redux
Routes	Imperative (functional)	Declarative	Declarative, cross-stack
Backend
Language	JavaScript (ES2015+, JSX)	n/a	C#, F#
Libraries	Node.js, Express, Sequelize, GraphQL	n/a	ASP.NET Core, EF Core, ASP.NET Identity
SSR	Yes	n/a	n/a
Data API	GraphQL	n/a	Web API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

• Getting Started with React.js
• Getting Started with GraphQL and Relay
• React.js Questions on StackOverflow
• React.js Discussion Board
• Flux Architecture for Building User Interfaces
• Enzyme — JavaScript Testing utilities for React
• Flow — A static type checker for JavaScript
• The Future of React
• Learn ES6, ES6 Features

Related Projects

• GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
• Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
• Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

• #react-starter-kit on Stack Overflow — Questions and answers
• #react-starter-kit on Gitter — Watch announcements, share ideas and feedback
• GitHub issues, or Scrum board — File issues, send feature requests
• appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
• @koistya on Codementor, or Skype — Private consulting

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

---

Made with ♥ by Konstantin Tarkus (@koistya) and contributors