Vashtalk

React-based chat project for Vashta.

Setup

1. Navigate to backend/ and install modules: npm install (or npm install --force for fresh installation)
2. Navigate to frontend/chat-client/ and install modules: npm install(or npm install --force for fresh installation)
3. Install nodemon module: npm i -g nodemon
4. Install PostgreSQL
   • Windows:
     • Install 9.6: https://www.postgresql.org/download/windows/
     • Set root postgres user password to 1248 in setup (or set new pass in models/index.js)
   • Ubuntu:
     • sudo apt-get update
     • sudo apt-get install postgresql postgresql-contrib
     • Login as postgres user: sudo -i -u postgres
     • Connect to postgres: psql -U postgres
     • Set the password to 1248: \password
     • Exit database: \q
     • Switch back to previous user: exit
5. Add "psql" to Windows PATH
   • Windows:
     • Add C:\Program Files\PostgreSQL\9.6\bin to PATH
     • Add C:\Program Files\PostgreSQL\9.6\lib to PATH
     • Restart terminal(s)
6. Connect to postgres: psql -U postgres
7. Create chat database: create database chat;
8. Exit database: \q
9. Install redis
10. Start the redis websocket server: redis-server
11. Using another terminal if necessary, navigate into backend/
12. Compile the code with babel: npm run build
13. Start the backend nodemon server: npm run serve
14. Using another terminal if necessary, navigate into frontend/chat-client/
15. Start the frontend nodemon server: npm start

PostgreSQL Key Commands

• psql -U postgres: Connect to postgres
• \c chat: Connect to chat database
• \d: List tables
• \d table_name: Describe table table_name
• \q: Quit postgres

Recommended VSCode Extensions

• ESLint
  • No setup needed (.eslintrc.js already exists in frontend/chat-client/ and backend/)
  • Necessary NPM modules will have been installed upon npm install or yarn install in both frontend/chat-client/ and backend/
• Prettier
  • Add the following to your VSCode User Settings:

    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.trailingComma": "es5",
    "prettier.eslintIntegration": true,
    "editor.formatOnSave": true,
    "prettier.printWidth": 140,
    "prettier.proseWrap": "preserve"
    

Useful Links

• Node (Includes NPM)
• Yarn
• Chat (Vashta Server) + Chat (Local)
• GraphQL Testing (Vashta Server) + GraphQL Testing (Local)
• Apollo GraphQL Docs + Apollo GraphQL Docs (2.0 Migration)
• Sequelize Docs
• MobX Docs + MobX React Docs
• React Tutorial
• React Component Lifecycle Docs
• React Router Docs
• React Semantic UI Docs
• React Styled Components Docs
• Lodash