CommandBlog is a Blog web application build with privacy and security in mind. Sign-up with your e-mail and start sharing with the world.
CommandBlog An user should be able to signup using a personal email and password. After the user has succesfully created an acccount, the user can create and share new articles.
- Create back-end Full CRUD using Ruby On Rails.
- Create front-end Full CRUD using ReactJS.
- Style front-end using CSS Grid, Flexbox and Semantic UI.
- Implement Authentication for the Users.
Supporting libraries and dependencies, and their role in the project.
| Library | Description |
|---|---|
| React | Front-end Library. |
| React Router | Routing for React. |
| React SemanticUI | Front-end UI Framework. |
| Axios | Promise based HTTP client for the browser and node.js. |
| Rails | Web application development framework. |
| PostgreSQL | Open source object-relational database system. |
| JSON Web Token | Secure way of transmitting information between parties as a JSON object. |
| bcrypt | A library to help you hash passwords. |
| CORS | Middleware that can be used to enable CORS with various options. |
Wireframes section to display desktop, tablet and mobile views.
- Wireframe
- Tablet Resource Index
- Mobile Resource Index
Structure of how your React components are being rendered. This should show the parent to child relation between you components. In other words, show which components are rendering the other components.
- Main Components
React components and the data architecture of app. Expected your directory/file tree.
src
|__ assets/
|__ fonts
|__ graphics
|__ images
|__ mockups
|__ components/
|__ Header.jsx
|__ Main.jsx
|__ Footer.jsx
|__ shared/
|__ Articles.jsx
|__ Caterories.jsx
|__ Article.jsx
|__ Category.jsx
|__ App.js
|__ services/
Use this section to go into further depth regarding your components, including breaking down the components as stateless or stateful, and considering the passing of data between those components.
| Component | Type | state | props | Description |
|---|---|---|---|---|
| Header | functional | n | n | The header will contain the navigation and logo. |
| Main | class | n | n | The main will provide a link to each of the pages. |
| Articles | class | y | n | The gallery will render the posts using cards in flexbox. |
| Article | functional | n | y | The cards will render the post info via props. |
| Footer | functional | n | n | The footer will show info about me and a link to my portfolio. |
Use this section to estimate the time necessary to build out each of the components you've described above.
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Add Contact Form | L | 3 hrs | 2 hrs | 3 hrs |
| Create CRUD Actions | H | 3 hrs | 1 hrs | TBD |
| TOTAL | 6 hrs | 3 hrs | TBD |
Why is this necessary? Time frames are key to the development cycle. You have limited time to code your app, and your estimates can then be used to evaluate possibilities of your MVP and post-MVP based on time needed. It's best you assume an additional hour for each component, as well as a few hours added to the total time, to play it safe.
ERD
- Add error handling on the backend.
- Add test to the frontend.
- .
Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
Use this section to list of all major issues encountered and their resolution, if you'd like.