Nobody dropping by your desk uninvited anymore? Give us a week to change that 😈
CoPaw is an internal tool that is a hybrid between an employee directory and a social network. Users can sign up for an account, sign in, post messages to other users, and create/follow message boards or topics based on interest. They can also edit their own posts and delete them. As a post-MVP goal, coworkers will be able to see to where other users are logging in from on a world map. CoPaw is built using React front-end and Ruby on Rails back-end. Lets paws together and don't forget to stay pawsitive!
- Web app built as an SPA(single-page app)
- Use atleast one API to call and display information
- Sign up
- Sign in
- Search Bar
- Messaging board
- Creation of messages
- Editing of messages
- Deletion of messages
- Rails Backend (API)
- React Frontend
- Authentication
- Flexbox
- Nicely styled and ready for a portfolio
- Deployed on Surge/Heroku
- Robust commit history
- Code is correctly indented and well styled
- Console logs removed
- Readme created
- 3 related models (User plus two others)
- 3 associations (one-to-many or many-to-many)
- Worldwide map and coworker locator
- 404 Page
- Weather API
- Likes/Dislikes
- Emojis
| Library | Description |
|---|---|
| Rails Documentation | Ruby on Rails Library. |
| React Router | React Router Library. |
| CSS Tricks | For help while styling web app. |
| Secret Key API | Third party API used to render secret key for sign up. |
| StackOverflow | For help while writing functional and class components. |
| GIPHY | For videos used on Readme, loading spinner, and 404 page. |
| Surge | For deployment of front-end of web app. |
| Heroku | For deployment of back-end of web app. |
-Zeplin
-Sketch
-Figma
-draw.io
-Postman
-Google Fonts
-Giphy
Prefix Verb URI Pattern Controller#Action
comments GET /comments(.:format) comments#index
POST /comments(.:format) comments#create
comment GET /comments/:id(.:format) comments#show
PATCH /comments/:id(.:format) comments#update
PUT /comments/:id(.:format) comments#update
DELETE /comments/:id(.:format) comments#destroy
discussions GET /discussions(.:format) discussions#index
POST /discussions(.:format) discussions#create
discussion GET /discussions/:id(.:format) discussions#show
PATCH /discussions/:id(.:format) discussions#update
PUT /discussions/:id(.:format) discussions#update
DELETE /discussions/:id(.:format) discussions#destroy
auth_login POST /auth/login(.:format) authentication#login
auth_verify GET /auth/verify(.:format) authentication#verify
GET /users/:user_id/profile(.:format) profiles#find_profile
POST /profiles/:profile_id/interests(.:format) interests#create
GET /interests/keyword/:keyword(.:format) interests#find_by_key
POST /profiles/:profile_id/interests/:interest_id(.:format) interests#add_profile
GET /profiles/byinterest/:interest_id(.:format) profiles#show_by_interest
GET /interests/profile/:profile_id(.:format) interests#find_by_profile
GET /discussions/:discussion_id/comments(.:format) comments#find_by_discussion
interests GET /interests(.:format) interests#index
POST /interests(.:fo
9B60
rmat) interests#create
interest GET /interests/:id(.:format) interests#show
PATCH /interests/:id(.:format) interests#update
PUT /interests/:id(.:format) interests#update
DELETE /interests/:id(.:format) interests#destroy
profiles GET /profiles(.:format) profiles#index
POST /profiles(.:format) profiles#create
profile GET /profiles/:id(.:format) profiles#show
PATCH /profiles/:id(.:format) profiles#update
PUT /profiles/:id(.:format) profiles#update
DELETE /profiles/:id(.:format) profiles#destroy
users GET /users(.:format) users#index
POST /users(.:format) users#create
user GET /users/:id(.:format) users#show
PATCH /users/:id(.:format) users#update
PUT /users/:id(.:format) users#update
DELETE /users/:id(.:format) users#destroy
GET /discussions(.:format) discussions#index
POST /discussions(.:format) discussions#create
GET /discussions/:id(.:format) discussions#show
PATCH /discussions/:id(.:format) discussions#update
PUT /discussions/:id(.:format) discussions#update
DELETE /discussions/:id(.:format) discussions#destroy
GET /comments(.:format) comments#index
POST /comments(.:format) comments#create
GET /comments/:id(.:format) comments#show
PATCH /comments/:id(.:format) comments#update
PUT /comments/:id(.:format) comments#update
DELETE /comments/:id(.:format) comments#destroy
Surge(front-end): (http://www.copaw.surge.sh/)
Heroku(Back-end): (https://copaw.herokuapp.com)
- Clone repository down with 'git clone https://github.com/Sunnydayz77/CoPaw.git'
- CD into repository
- Run 'bundle install'
- Run 'rails db:create'
- Run 'rails db:migrate RAILS_ENV=development'
- Run 'rails db:seed'
- Run 'rails server' on 'http://localhost:3000/'
- Create new terminal tab with 'command' + 't' on mac
- CD in to client folder
- Run 'npm install'
- Run 'npm install --save axios'
- Run 'npm start' on 'http://localhost:3001/'
//Code that allows a user to add an interest to their profile
class CreateInterest extends Component {
constructor(props) {
super(props);
this.state = {
interestData: {
text: ''
}
}
}
handleChange = async (e) => {
const { name, value } = e.target;
this.setState(prevState => ({
interestData: {
...prevState.interestData,
[name]: value
}
}));
}
handleCreate = async (e) => {
e.preventDefault();
const existingInterest = await findInterest(this.state.interestData.text)
if (existingInterest[0]) {
addProfileToInterest(existingInterest[0].id, this.props.profile_id)
}
else {
createInterest(this.state.interestData, this.props.profile_id)
}
}
render() {
return (
<div className='create-interest'>
<div className="interest-create-container">
<form className='interest-form' >
<div className='form-field'>
<input name="text" type="text" placeholder='Crocheting'
value={this.state.interestData.text}
/>
</div>
<button>Add</button>
</form>
</div>
</div>
)
}
}
export default CreateInterest;
Surge(front-end): (http://www.copaw.surge.sh/)
Heroku(Back-end): (https://copaw.herokuapp.com)