Introduction

中文简介

Create your own instagram!

Technology stack

• react buckets of
• ant design
• egg.js
• mysql

Before and after the end of the separation of development mode, the front-end and back-end projects belong to different projects

// instagram/client The front-end engineering
// instagram/service The backend engineering

Note: this project is purely personal fiddle, have nothing to do with them.

Features screenshots

The login

Focus on

Posting

Thumb up, review and search

Modify personal information

Run the project

Because of different port reason, front and back side to solve the cross domain. Launched devServer front-end engineering, need to start the backend engineering

• git clone https://github.com/zhoushaw/Instagram.git
• cd Instagram

Run the back-end projects

• Please make sure you have install mysql in your local environment and config the global variable
• mysql -u root -p # and enter the password database
• create database learn
• use learn; # change dabase
• source learn.sql's path; example：source /Users/shawzhou/Desktop/learning/instagram/db/learn.sql;
• config eggs.js link dabase information

// goto service/config/config.local.ts，config your dabase information
config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    database: 'learn',
    username: '', 
    password: '', 
    operatorsAliases: false
};

• config NiuYun upload token information

// goto /service/app/service/qiniu.ts，Configure your seven NiuYun token information
export default class qiniuService extends Service {
    // To seven NiuYun individual panel=>The secret key management view
    private accessKey: string = ''; // The secret key
    private secretKey: string = ''; // The secret key
    private publicBucketDomain = ''; // Outside the chain of the default domain name

    private options: qiniuOptioin = {
        scope: '', // upload scoped
        expires: 7200
    }

    // ....
}

// Seven NiuYun storage area set, to go/client/src/components/upload/index.js，Configure the upload area
class Upload extends React.Component{


    uploadFn = async () => {
        // ...
        var config = {
            region: qiniu.region.z0 // Subordinate to the area, can go to seven NiuYun document view
        };
        // ...
}

• in /service file
• npm install
• npm run dev

Run the front-end project

• cd client
• npm install
• npm start

The target function

• Login, registration
• Modify personal information
• Focus on
• comments
• give a like
• Search for posts
• Upload the picture
• Posting
• collection

If you have any help to you, you can order the upper right corner of the Star support thank you very much！ ^_^