"Talk About React - Student Discussion Board" is a reddit style discussion forum web app, for Udacity’s React Nanodegree second project assignment, "Readable". Users will be able to post content to predefined categories, comment on their posts and other users' posts, and vote on posts and comments. Also, users will also be able to edit and delete posts and comments.
-
This app was built with react, redux, react-redux-router, redux-thunk, material-ui.
-
Most application state(Create, Read, Edit, Delete, Voting posts/comments) is managed by the Redux store. Updates are triggered by dispatching actions to reducers.
For a demo, check out https://reactnd-readable.firebaseapp.com/
- Clone project locally
git clone https://github.com/sujinleeme/reactnd-project-readable.git. - Go to react app
cd readable. - Install all project dependencies with
npm installinreadablefolder. - Run server with
npm start. - Check console or browser if server runs on http://localhost:3000/.
To install and start the API server, run the following commands in api-server directory:
- Go to Server Directory
cd readable/src/api-server. - Install all server dependencies with
npm install. - Run backend server with
node server.js. - Check console or browser if server runs on http://localhost:3001/.
npm run build && npm run deploy
Within the download you'll find the following directories and files in src:
|-- api-server
| |-- README.md
| |-- categories.js
| |-- comments.js
| |-- config.js
| |-- package.json
| |-- posts.js
| |-- server.js
| `-- tabs.js
|-- components
| |-- assets
| | |-- GithubIcon.js
| | `-- LoadingProgress.js
| |-- footer
| | `-- CopyrightBar.js
| |-- header
| | `-- HeaderBar.js
| |-- menu
| | |-- CategoryContainer.js
| | `-- TabContainer.js
| |-- pages
| | |-- AllPostsPage.js
| | |-- CategoryPostsPage.js
| | |-- MainRouterSettingLayoutPage.js
| | |-- NotFound.js
| | |-- PostDetailComments.js
| | `-- PostDetailPage.js
| `-- post
| |-- body
| | `-- PostContent.js
| |-- buttons
| | |-- CommentButton.js
| | |-- PostSaveCancelButton.js
| | |-- PostSettingButton.js
| | `-- UpDownVoter.js
| |-- create
| | |-- NewComment.js
| | `-- NewPost.js
| `-- list
| |-- PostCard.js
| `-- PostListContainer.js
|-- history.js
|-- index.css
|-- index.js
|-- modules
| |-- actionTypes
| | |-- menuTypes.js
| | `-- postsTypes.js
| |-- actions
| | |-- menu.js
| | `-- posts.js
| |-- reducers
| | |-- menu.js
| | `-- posts.js
| `-- root
| |-- configStore
| | `-- index.js
| |-- configurl.js
| |-- headers.js
| `-- rootReducer
| `-- index.js
|-- registerServiceWorker.js
|-- store.js
|-- styles
| |-- CustomTheme.js
| |-- assets
| | `-- LoadingProgress.js
| |-- buttons
| | |-- CommentButton.js
| | |-- PostSaveCancelButton.js
| | `-- UpDownVoter.js
| |-- footer
| | `-- CopyrightBar.js
| |-- form
| | |-- NewComment.js
| | `-- NewPost.js
| |-- header
| | `-- HeaderBar.js
| |-- menu
| | |-- CategoryContainer.js
| | `-- TabContainer.js
| |-- page
| | |-- MainRouterSettingLayoutPage.js
| | |-- NotFound.js
| | `-- PostDetailPage.js
| `-- post
| |-- PostCard.js
| |-- PostContent.js
| `-- PostListContainer.js
`-- utils
`-- utils.js
- Use Firebase for backend.
- A project starter server repository contributed by Udacity.
- The MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent