└── README.md
/README.md:
--------------------------------------------------------------------------------
1 | # DMcript README
2 |
3 | > Project Planning section:
4 | >
5 | >
6 |
7 | - [Overview](#overview)
8 | - [MVP](#mvp)
9 | - [Goals](#goals)
10 | - [Libraries](#libraries)
11 | - [Client (Front End)](#client-front-end)
12 | - [Wireframes](#wireframes)
13 | - [Component Tree](#component-tree)
14 | - [Component Hierarchy](#component-hierarchy)
15 | - [Component Breakdown](#component-breakdown)
16 | - [Component Estimates](#component-estimates)
17 | - [Server (Back End)](#server-back-end)
18 | - [ERD Model](#erd-model)
19 | - [Post-MVP](#post-mvp)
20 | - [Code Showcase](#code-showcase)
21 | - [Code Issues & Resolutions](#code-issues--resolutions)
22 |
23 |
24 |
25 | ## Overview
26 |
27 | _**DMcrypt** is a Chat App web application build with privacy and security in mind. Sign-up with your e-mail and start sharing messages with your friends. Create group chats with your friends in a secure and private enviroment. This can be very useful when dealing with confidential information._
28 |
29 |
30 |
31 |
32 | ## MVP
33 |
34 | _**DMcrypt** Application allow the User to sign-up using their personal email and password.
35 | After the User has been authenticated he or she can start sending messages to other Users._
36 |
37 |
38 |
39 | ### Goals
40 |
41 | - _Create back-end Full CRUD using Ruby On Rails._
42 | - _Create front-end Full CRUD using ReactJS._
43 | - _Style front-end using CSS Grid, Flexbox and Semantic UI._
44 | - _Implement Authentication for the Users._
45 | - _._
46 |
47 |
48 |
49 | ### Libraries
50 |
51 | > Supporting libraries and dependencies, and their role in the project.
52 |
53 | | Library | Description |
54 | | :--------------: | :----------------------------------------- |
55 | | React | _Front-end Library._ |
56 | | React Router | _Routing for React._ |
57 | |ActionCableProvide| _This package provides an ActionCable context provider._ |
58 | | React SemanticUI | _Front-end UI Framework._ |
59 | | Axios | _Promise based HTTP client for the browser and node.js._ |
60 | | Rails | _Web application development framework._ |
61 | | PostgreSQL | _Open source object-relational database system._ |
62 | | JSON Web Token | _Secure way of transmitting information between parties as a JSON object._ |
63 | | bcrypt | _A library to help you hash passwords._ |
64 | | CORS | _Middleware that can be used to enable CORS with various options._ |
65 | | Action Cable | _Websockets integration._ |
66 |
67 |
68 |
69 | ### Client (Front End)
70 |
71 | #### Wireframes
72 |
73 | > Wireframes section to display desktop, tablet and mobile views.
74 |
75 |
76 | 
77 | - Wireframe
78 |
79 | 
80 | - Desktop Landing
81 |
82 | 
83 | - App Flowchart
84 |
85 | 
86 | - Resource Show
87 |
88 | 
89 | - Tablet Resource Index
90 |
91 | 
92 | - Mobile Resource Index
93 |
94 | #### Component Tree
95 |
96 | > 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.
97 |
98 | 
99 | - Mobile Resource Index
100 |
101 | #### Component Hierarchy
102 |
103 | > React components and the data architecture of app. Expected your directory/file tree.
104 |
105 | ``` structure
106 |
107 | src
108 | |__ assets/
109 | |__ fonts
110 | |__ graphics
111 | |__ images
112 | |__ mockups
113 | |__ components/
114 | |__ Header.jsx
115 | |__ services/
116 |
117 | ```
118 |
119 | #### Component Breakdown
120 |
121 | > 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.
122 |
123 | | Component | Type | state | props | Description |
124 | | :----------: | :--------: | :---: | :---: | :--------------------------------------------------------------- |
125 | | Header | functional | n | n | _The header will contain the navigation and logo._ |
126 | | Navigation | functional | n | n | _The navigation will provide a link to each of the pages._ |
127 | | Gallery | class | y | n | _The gallery will render the posts using cards in flexbox._ |
128 | | Gallery Card | functional | n | y | _The cards will render the post info via props._ |
129 | | Footer | functional | n | n | _The footer will show info about me and a link to my portfolio._ |
130 |
131 | #### Component Estimates
132 |
133 | > Use this section to estimate the time necessary to build out each of the components you've described above.
134 |
135 | | Task | Priority | Estimated Time | Time Invested | Actual Time |
136 | | ------------------- | :------: | :------------: | :-----------: | :---------: |
137 | | Add Contact Form | L | 3 hrs | 2 hrs | 3 hrs |
138 | | Create CRUD Actions | H | 3 hrs | 1 hrs | TBD |
139 | | TOTAL | | 6 hrs | 3 hrs | TBD |
140 |
141 | > _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._
142 |
143 |
144 |
145 | ### Server (Back End)
146 |
147 | #### ERD Model
148 | 
149 |
150 | > ERD
151 |
152 |
153 |
154 | ***
155 |
156 | ## Post-MVP
157 |
158 | > Use this section to document ideas you've had that would be fun (or necessary) for your Post-MVP. This will be helpful when you return to your project after graduation!
159 |
160 | ***
161 |
162 | ## Code Showcase
163 |
164 | > Use this section to include a brief code snippet of functionality that you are proud of and a brief description.
165 |
166 | ## Code Issues & Resolutions
167 |
168 | > Use this section to list of all major issues encountered and their resolution, if you'd like.
169 |
--------------------------------------------------------------------------------