This is a clone-version of Reddit. By default, this app will build in Production
mode.
View the live demo of Reddit-Clone.
- Features in this Project
- To build the output
- Launch the App
- Plugins
- File Structure for reddit-clone
- Roadmap
- contains a list of topics which allows users to upvote or downvote multiple times
- allow user to submit topics, which topic is simply a string that does not exceed 255 characters.
- 20 sample topics listed on the page initially, user can add more
- unit test are included in this project
$ npm install
# for development
$ npm run dev
# to output the build
$ npm run build
Go to ./dist
folder, just launch the index.html
in your browser.
$ npm run test
- Icons:
Font-Awesome
- Build System:
Webpack
Boilerplate Credits: @emiloberg - Transpiler:
Babel
- Additional Javascript Library:
Underscore.js
- Test Runner + Framework:
Jest
> [reddit-clone]
|
├── [__test__] ::> folder contains all test scripts
|
├── [dist] ::> output folder for this project
|
├── [src] ::> source folder, where all the logic reside
| |
| ├── [components] ::> logic structure to be injected into the Html backbone
| |
| ├── [css] ::> styling sheets for this project
| |
| ├── [data] ::> holds the static data (list of entries)
| |
| ├── [img] ::> images used in this project
| |
| ├── [methods] ::> logics that altered the page and list
| |
| ├── $global.js ::> global scope variables used throughout the app
| |
| └── index.js ::> the starter of script
|
├── index.html ::> Project Html Backbone
|
├── package.json ::> List of NPM Packages required for this project
|
└── webpack.config.js ::> Webpack Configuration File
create the mock page for Reddit listinclude build system: Webpackinclude a Javascript Library: underscore.jsMaintain a list of topics and its upvotes/downvotes in-memory data structure (20 topics in a page)Allow the user to upvote or downvote a topic multiple times and sort the listAllow the user to submit topics, a "topic" is simply a string that does not exceed 255 characters.Writing unit testupdate readme document- modularize css (using SCSS preprocessor)
- ensure it fits for other devices